html - CSS固定宽度在一个范围内(CSS fixed width in a span)

Question

Within an unordered list:

(在无序列表中：)

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

Adding a class or style attribute is permitted but padding the text and adding or changing tags is not allowed.

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

The page is rendering with Courier New.

(该页面使用Courier New进行渲染。)

Goal is to have text after span lined up.

(目标是在跨度排队后有文字。)

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

Justification of the "OR" is unimportant.

(“OR”的理由并不重要。)

The lazy animal text may be wrapped in an additional element but I'll have to double check.

(懒惰的动物文本可能会包含在一个额外的元素中，但我必须仔细检查。)

  ask by jason saldo translate from so

Answer 1

In an ideal world you'd achieve this simply using the following css

(在一个理想的世界中，你只需使用以下css即可实现这一目标)

<style type="text/css">

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

</style>

This works on all browsers apart from FF2 and below.

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

Firefox 2 and lower don't support this value.

(Firefox 2及更低版本不支持此值。)

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.

(您可以使用-moz-inline-box，但请注意它与inline-block不同，并且在某些情况下可能无法正常工作。)

Quote taken from quirksmode

(报价取自quirksmode)