在无序列表中:
<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.
“或”的理由并不重要。
懒惰的动物文本可能被包装在一个额外的元素，但我必须再次检查。
当前回答
试试这个
> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">
其他回答
在理想情况下，您只需使用以下css即可实现此目标
<style type="text/css">
span {
display: inline-block;
width: 50px;
}
</style>
这适用于除FF2及以下版本外的所有浏览器。
Firefox 2及更低版本不支持此功能 价值。你可以使用-moz-inline-box， 但要知道这和 内联块，它可能不能作为 在某些情况下。
引用自quirksmode
<style type="text/css">
span {
position:absolute;
width: 50px;
}
</style>
您可以使用此方法为内联元素分配宽度
<span>标记需要设置为display:block，因为它是一个内联元素，将忽略width。
so:
<style type="text/css"> span { width: 50px; display: block; } </style>
然后:
<li><span> </span>something</li>
<li><span>AND</span>something else</li>
使用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:我已经定义了标签类，因为ul li span CSS选择器在我的PC上不工作!
当然，还有蛮力法:
<li><pre> The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR The active goldfish.</pre></li>
或者这就是你说的"填充"文本的意思?在这种情况下，这是一个模棱两可的工作。
这听起来有点像家庭作业。我希望你不是想让我们帮你做作业吧?
