2

我无法将文本放置在我想要的位置。以下是我的代码。

HTML

<h1 class="h1">
        <div class="left"><span class="font">H</span>ello</div>
        <div class="left"><span class="font">T</span>here</div>
        <div class="left"><span class="font">J</span>ames</div>
</h1>

和我的CSS

.h1 {
    margin-left:5px;
    margin-top:3px;
    font-size:20px;
}
.font {
    font-size:35px;
}
.left {
    float:left;
    margin:0 10px 0 0;
}

这一切都很好，但是当我尝试向 div 添加另一个类时，下一个单词会下降一行。这是我要开始工作的代码jsFiddle。我试图让这些词像一块垫脚石，如果你有关于我如何以更简单的方式做到这一点的建议，那就太好了。

4

3 回答 3

2

,下课后立即删除left。,使类名left在读取时无效left,。

<h1 class="h1">
        <div class="left"><span class="font">H</span>ello</div>
        <div class="left down"><span class="font">T</span>here</div>
        <div class="left downer"><span class="font">J</span>ames</div>
</h1>

演示

于 2013-05-14T01:49:29.630 回答
2

如其他答案所述，您应该删除class属性中的逗号。

:first-letter在较新的浏览器中，您实际上可以通过使用伪元素而不是将第一个字母包装在元素中来创建您想要实现的效果而无需额外的标记span。

HTML

<h1 class="h1">
  <div class="left">Hello</div>
  <div class="left down">There</div>
  <div class="left downer">James</div>
</h1>

CSS

.left {
    float:left;
    margin:0 10px 0 0;
}
.left:first-letter {
    font-size: 35px;
}

这是一个jsFiddle演示。

于 2013-05-14T02:07:03.693 回答
1

演示：http: //jsfiddle.net/qTguq/3/

删除,多个班级作业上的 s。多个类名应该space分开。

<h1 class="h1">
        <div class="left"><span class="font">H</span>ello</div>
        <div class="left down"><span class="font">T</span>here</div>
        <div class="left downer"><span class="font">J</span>ames</div>
</h1>
于 2013-05-14T01:48:55.347 回答