在无序列表中:
<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.
“或”的理由并不重要。
懒惰的动物文本可能被包装在一个额外的元素，但我必须再次检查。
当前回答
当然，还有蛮力法:
<li><pre> The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR The active goldfish.</pre></li>
或者这就是你说的"填充"文本的意思?在这种情况下，这是一个模棱两可的工作。
这听起来有点像家庭作业。我希望你不是想让我们帮你做作业吧?
其他回答
当然，还有蛮力法:
<li><pre> The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR The active goldfish.</pre></li>
或者这就是你说的"填充"文本的意思?在这种情况下，这是一个模棱两可的工作。
这听起来有点像家庭作业。我希望你不是想让我们帮你做作业吧?
ul { list-style-type:没有; padding-left: 0 px; ｝ Ul li span { 浮:左; 宽度:40像素; ｝ < ul > <li><span></span>懒狗 <li><span>AND</span>懒猫 <li><span>OR</span>活动的金鱼 < / ul >
就像Eoin说的，你需要把一个非中断空间到你的“空”跨度，但你不能给一个内联元素分配宽度，只有填充/边距，所以你需要让它浮动，这样你就可以给它一个宽度。
有关jsfiddle的示例，请参见http://jsfiddle.net/laurensrietveld/JZ2Lg/
不幸的是，内联元素(或具有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>
现在我看到你需要使用span和list，所以我们需要重写一下这个:
<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>
<style type="text/css">
span {
position:absolute;
width: 50px;
}
</style>
您可以使用此方法为内联元素分配宽度
在这种情况下，People span不能是block元素，因为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元素格式化为绝对的，在上面:0，左边:0;所以它保持在左上方，你设置padding-left(或:padding:0px 0px 0px 80px;)来为span元素设置这个自由空间。
对于简单的情况，它应该工作得更好。
