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

我希望在包含上标的项目列表中对齐文本，以便主文本在垂直方向上等距排列：

HTML:

形状：矩形
长度：5米
宽度：3米
面积：15平方米
颜色：蓝色

我尝试过修补CSS中的

显示

、

高度

、

行高

和

垂直对齐

属性。但似乎都不管用。有人能帮我吗？谢谢。

这可能会帮助您：

HTML:

这可能会帮助您：

HTML:

---

问题的原因是。将线高度设置为足够大的值（如1.3）可能会有所帮助。但一般来说，最好避免使用

sup

元素，并使用

span

和使用相对定位创建上标的样式来构造自己的上标元素（与

sup

引起的垂直对齐不同，相对定位不影响行距）

---

在这种特定情况下，有一种更简单、更好的方法：使用

²，而不是
2
，或直接输入上标的两个字符“²”（在Windows上，可以使用Alt 0178执行此操作）。作为一个普通字符，它不会影响行距，并且由排版师设计，它的外观可能比使用HTML或CSS创建的任何上标2都要好。
问题的原因在于。将线高度设置为足够大的值（如1.3）可能会有所帮助。但一般来说，最好避免使用
sup
元素，并使用
span
和使用相对定位创建上标的样式来构造自己的上标元素（与
sup
引起的垂直对齐不同，相对定位不影响行距）

在这种特定情况下，有一种更简单、更好的方法：使用
²，而不是
2
，或直接输入上标的两个字符“²”（在Windows上，可以使用Alt 0178执行此操作）。作为一个普通字符，它不会影响行距，并且由排版师设计，它的外观可能比使用HTML或CSS创建的任何上标2都要好。
根据格式，您可以在调用
标记之前尝试减小字体大小：

…面积：15平方米

…

仍然有一点间距，但并不明显。
根据格式的不同，您可以在调用
标记之前尝试降低字体大小：

…面积：15平方米

…

还有一点差距，但并不明显。
这肯定非常有用，你应该得到比这更多的选票。谢谢。这当然很有帮助，你应该得到更多的选票。谢谢
<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>

<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>​

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; }