Question

我遇到麻烦让文字按照我的意愿定位。以下是我的代码。

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。我试图让这些话成为踏脚石，如果你对如何以更简单的方式做到这一点有建议，那就太棒了。

Answer 1

在课程,后立即删除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>

Demo

Answer 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 演示。

Answer 3

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

删除多个课程作业的,。多个类名应该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>

文字定位

3 个答案:

Demo