html - 跨度中的 CSS 固定宽度

Question

在无序列表中:

<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 呈现。

目标是让 span 之后的文本排成一行。

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

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

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

Answer 1

在理想情况下，您只需使用以下 css 即可实现这一目标

<style type="text/css">

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

</style>

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

Firefox 2 and lower don't support this value. You can use -moz-inline-box, but be aware that it's not the same as inline-block, and it may not work as you expect in some situations.

引自 quirksmode