html - 如何使用 CSS 在单个内联元素内以不同方式对齐文本？

Question

这应该很有趣。这是我尝试用 CSS 做的事情：

1. “示例对齐”一词应位于单个<h1>元素中。
2. “对齐”这个词应该在第二行（用<br />标签很容易）。
3. “An”这个词应该比其他词小（用<span>标签很容易）。

所以我们有：

<h1><span>An</span> Example <br />Alignment</h1>

但这里有一个问题：

• 我还想将第二个和第三个单词的第一个字母垂直对齐，这就是我遇到问题的地方。

它应该是这样的： http: //jsfiddle.net/Baumr/H2Pzr/

但这是一个丑陋的解决方案，因为有两个<h1>元素。

关于如何通过保持 HTML 相同来使用 CSS 执行此操作的任何想法？很想听。先感谢您。

PS我也可以将“An”放入单独的<span>，但我更愿意将所有内容放在一个单独的中<h1>。）

Answer 1

我会通过使用两个display:inline-block跨度来进行填充，以确保右边距始终完全相同（字体宽度会有所不同，具体取决于使用中的字体）。

<h1>
    <span class="padding">An</span> Example <br>
    <span class="padding"></span> Alignment
</h1>

CSS：

h1 {
    font-size: 30px;
}

.padding {
    font-size: 20px;
    width: 30px;
    display:inline-block;
}

请注意，IE 并不总是使用inline-block正确的方式（尽管在这种情况下它应该）。

更新

一个更好的解决方案：http: //jsfiddle.net/H2Pzr/9/

使用table-cell元素的显示将它们自动放在两列中：

HTML：

<h1>
<span class="first">An</span>
<div class="second">
    Example <br>
    Alignment
</div>
</h1>

CSS：

h1 {
    font-size: 30px;
}

.first {
    display:table-cell;
    font-size: 20px;
    color: #444;
}
.second {
    display:table-cell;
}

Answer 2

使用两个具有不同类的跨度，请参见jsfiddle

<h1><span class="first">An</span> Example <br>
    <span class="second">Alignment</span>
    </h1>

Answer 3

我会在同一个 H1 标签中使用两个跨度类：

<h1>
    <span class="small-text">An</span> Example 
    <span class="line-two">Alignment</span>
</h1>

然后相应地更新您的 CSS：

h1 {
    font-size: 30px;
}

span.small-text {
    font-size: 20px;
}

.line-two{
    display:block;
    margin-left: 31px;
}

您甚至不需要，<br />因为您可以在此处将第二个跨度显示为display:block; 更新的小提琴：http: //jsfiddle.net/H2Pzr/6/

Answer 4

试试这个：（最少的元素！）

<h1>Example <br>Alignment</h1>​

h1 {
    font-size: 30px;
    margin-left: 31px;
}

h1:before
{
    content: 'An  ';
    font-size: 20px;
    margin-left: -31px;
}