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

Question

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

1. 单词“An Example Alignment”应该在单个 <h1> 中元素。
2. “对齐”一词应该在第二行(使用 <br /> 标签很容易)。
3. 单词“An”应该比其他单词小(使用 <span> 标签很容易)。

所以我们有:

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

但问题是:

• 我还想将第 2 个和第 3 个单词的首字母彼此垂直对齐，这就是我遇到问题的地方。

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

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

关于如何通过保持 HTML 相同来使用 CSS 做到这一点的任何想法？很想听。提前谢谢你。

附言我也可以将“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;
}