在无序列表中:
<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.
“或”的理由并不重要。
懒惰的动物文本可能被包装在一个额外的元素，但我必须再次检查。
当前回答
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/
其他回答
<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>
您可以使用表来实现，但它不是纯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:没有; padding-left: 0 px; ｝ Ul li span { 浮:左; 宽度:40像素; ｝ < ul > <li><span></span>懒狗 <li><span>AND</span>懒猫 <li><span>OR</span>活动的金鱼 < / ul >
试试这个
> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">
