在无序列表中：
<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>允许添加class或style属性，但不允许填充文本以及添加或更改标签。
该页面正在使用Courier New呈现。
目标是在跨度后排列文本。
The lazy dog.
AND The lazy cat.
OR The active goldfish.“ OR”的理由并不重要。
懒惰的动物文字可能包含在其他元素中，但我必须仔细检查。
Answers:
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>就像Eoin所说的那样，您需要在“空”跨度中放置一个不间断的空格，但是您不能为内联元素分配宽度，只能填充/边距，因此您需要使其浮动，以便给它一个宽度。
有关jsfiddle的示例，请参见http://jsfiddle.net/laurensrietveld/JZ2Lg/
diplay: inline-block; width: 32px;在大多数现代浏览器中都可以做到。
diplay为阅读吗display，顺便说一句，它对我有用。谢谢
在理想的世界中，您只需使用以下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>该<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>您可以使用此方法为内联元素分配宽度
在这种情况下，人跨度不能成为一个块元素，因为在li元素之间的其余文本将下降。另外，使用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元素设置为绝对格式，并在top：0; left：0; 因此它保持在左上方，您可以设置padding-left（或：padding：0px 0px 0px 0px 80px;）来为span元素设置此可用空间。
对于简单的情况，它应该更好地工作。
尝试这个
> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">使用HTML 5.0，可以使用<span>或固定文本块的宽度<div>。
对于<span>，重要的是添加以下CCS行
display: inline-block;对于空的<span>，重要的是增加 空间。
我的代码如下
body
{
font-family: Arial;
font-size:20px;
}
div
{
width:200px;
font-size:80px;
background-color: lime;
}
div span
{
display:block;
width:200px;
background-color: lime;
}
ul li span
{
display: inline-block;
width: 80px;
background-color: yellow;
}
span.tab
{
display: inline-block;
width: 80px;
background-color: yellow;
}<DIV>
<div class='test'>ABCDEF</div>
<SPAN>
<div>
<span class='test'>ABCDEF</span>
</div
<br>
<ul>
<li><span class='tab'> </span> The lazy dog.</li>
<li><span class='tab'>AND</span> The lazy cat.</li>
<li><span class='tab'>OR</span> The active goldfish.</li>
</ul>PS：我定义了tab类，因为ul li spanCSS选择器无法在我的PC上运行！
您可以使用表来完成此操作，但这不是纯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>请注意，它不会完全按照您的要求显示，因为它会在每个选项上切换行。但是，我希望这可以帮助您更接近答案。
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>