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

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和属性。但似乎没有一个工作。任何人都可以帮助我吗？谢谢。heightline-heightvertical-align

Answer 1

问题的原因是上标往往会使行间距不均匀。设置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/><li>面积：15m<font

size=-1>²</font></li>

...<p/>

仍然有轻微的间距差距，但并不是很明显。