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>

我尝试修改 display、height、line-height 和 vertical-align 属性CSS。但似乎都不起作用。谁能帮帮我吗？谢谢。

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 看起来更好。