如何在包含上标的列表中垂直对齐文本？

Question

我想在包含上标的项目列表中对齐文本，使主文本在垂直方向上间隔相等：

HTML：

<ul>
 <li>Shape: Rectangle</li>
 <li>Length: 5m</li>
 <li>Breadth: 3m</li>
 <li>Area: 15m<sup>2</sup></li>
 <li>Color: Blue</li>
</ul>

我尝试过修改CSS中的display，height，line-height和vertical-align属性。但似乎都没有效果。有人可以帮我吗？感谢。

Answer 1

问题的原因是superscripts tend to make line spacing uneven。将line-height设置为足够大的值（如1.3）可能会有所帮助。但一般来说，最好避免使用sup元素并使用span和使用相对定位创建上标的样式构建自己的上标元素（不会影响行间距，与垂直不同）由sup）引起的对齐。

在这种特殊情况下，有一种更简单，更好的方法：代替<sup>2</sup>，使用²，或直接输入上标两个字符“²”（在Windows上，你可以这样做使用Alt 0178）。作为普通字符，它不会影响行间距，并且由印刷师设计，可以预期它看起来比使用HTML或CSS创建的任何上标2更好。

Answer 2

这可能会对您有所帮助：http://jsfiddle.net/Wexcode/TgqQY/

HTML：

<ul>
    <li><span></span><span>Shape: Rectangle<span></li>
    <li><span></span><span>Length: 5m</span></li>
    <li><span></span><span>Breadth: 3m</span></li>
    <li><span></span><span>Area: 15m<sup>2</sup></span></li>
    <li><span></span><span>Color:</span> <span>Blue</span></li>
</ul>​

CSS：

ul { list-style: none; }
li { background: red; height: 50px; margin: 3px 0; padding: 5px 0; }
li span:first-child { height: 100%; }
li span { vertical-align: middle; display: inline-block; }

Answer 3

根据格式，您可以在调用<sup>标记之前尝试降低字体大小：

  

... <br/>＆lt; li＆gt;面积：15米＆lt; font

     

大小= -1＆GT;＆LT;坐席→2＆LT; / SUP＆GT;＆LT; /字体＆GT;＆LT; /立GT;

     

... <p/>

仍然存在轻微的间距差距，但实际上并不明显。