CSS 固定跨度宽度

在无序列表中：

<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>

允许添加类或样式属性，但不允许填充文本以及添加或更改标签。

该页面正在使用 Courier New 呈现。

目标是让跨度后的文本对齐。

    The lazy dog.
AND The lazy cat.
OR  The active goldfish.

“OR”的合理性并不重要。

懒惰的动物文本可能包含在附加元素中，但我必须仔细检查。

在理想的情况下，您只需使用以下 css 即可实现此目的

<style type="text/css">

span {
  display: inline-block;
  width: 50px;
}

</style>

这适用于除 FF2 及更低版本之外的所有浏览器。

Firefox 2 及更低版本不支持此功能 价值。您可以使用-moz-inline-box， 但请注意，它与 内联块，它可能无法正常工作 您期望在某些情况下。

引用自怪异模式