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，但请注意，它与内联块不同，在某些情况下可能无法正常工作。
从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>
<span>标记需要设置为display:block因为它是一个内联元素，并且会忽略宽度。
所以：
<style type="text/css"> span { width: 50px; display: block; } </style>
接着：
<li><span> </span>something</li> <li><span>AND</span>something else</li>
<style type="text/css"> span { position:absolute; width: 50px; } </style>
您可以使用这种方法来为内联元素分配宽度
在这种情况下，人们不能是一个块元素，因为李元素之间的文本的其余部分将会下降。 另外使用float是非常糟糕的想法，因为你将需要为整个li元素设置宽度，并且这个宽度将需要与整个ul元素或其他容器的宽度相同。
在html中尝试这样的事情：
<li><span></span><strong>The</strong> lazy dog.</li> <li><span>AND</span> <strong>The</strong> lazy cat.</li> <li><span>OR</span> <strong>The</strong> active goldfish.</li>
和在CSS中
li {position:relative;padding-left:80px;} // 80px or something else li span {position:absolute;top:0;left:0;} li strong {color:red;} // red or else
所以，当li元素是相对的，你将span元素设置为绝对的，并且在顶部：0; left：0; 所以它保持左上angular，并设置填充左（或：padding：0px 0px 0px 80px;）来为span元素设置这个可用空间。
它应该更好地处理简单的情况。
你可以使用表格来做，但不是纯粹的CSS。
<style> ul{ text-indent: 40px; } li{ list-style-type: none; padding: 0; } span{ color: #ff0000; position: relative; left: -40px; } </style> <ul> <span></span><li>The lazy dog.</li> <span>AND</span><li>The lazy cat.</li> <span>OR</span><li>The active goldfish.</li> </ul>
请注意，它不会像您想要的那样显示，因为它会切换每个选项的行。 不过，我希望这可以帮助你更接近答案。
那么，总是有蛮力的方法：
<li><pre> The lazy dog.</pre></li> <li><pre>AND The lazy cat.</pre></li> <li><pre>OR The active goldfish.</pre></li>
或者，这是你的意思是“填充”文本？ 在这方面这是一个模棱两可的工作。
这听起来有点像作业问题。 我希望你不是想让我们为你做功课吗？
