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.
对“或”的理由不重要。
懒惰的动物文本可能被包裹在一个额外的元素，但我必须仔细检查。
ul {
list-style-type: none;
padding-left: 0px;
}
ul li span {
float: left;
width: 40px;
}<ul>
<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
</ul>在理想的世界中，您只需使用以下css即可实现此目的
<style type="text/css">
span {
display: inline-block;
width: 50px;
}
</style>
这适用于除FF2及以下的所有浏览器。
Firefox 2及更低版本不支持此值。 您可以使用-moz-inline-box，但请注意它与inline-block不同，并且在某些情况下它可能无法正常工作。
引用来自quirksmode
不幸的是，内联元素（或者具有display：inline的元素）会忽略width属性。 你应该使用浮动div来代替：
<style type="text/css">
div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }
</style>
<div class="f1"></div><div class="f2">The Lazy dog</div><div class="f3"></div>
<div class="f1">AND</div><div class="f2">The Lazy cat</div><div class="f3"></div>
<div class="f1">OR</div><div class="f2">The active goldfish</div><div class="f3"></div>
现在我看到你需要使用跨度和列表，所以我们需要重写这一点：
<html><head>
<style type="text/css">
span.f1 { display: block; float: left; clear: left; width: 60px; }
li { list-style-type: none; }
</style>
</head><body>
<ul>
<li><span class="f1"> </span>The lazy dog.</li>
<li><span class="f1">AND</span> The lazy cat.</li>
<li><span class="f1">OR</span> The active goldfish.</li>
</ul>
</body>
</html>