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进行渲染。

目标是将span后的文本对齐。

    The lazy dog.
AND The lazy cat.
OR  The active goldfish.

“或”的理由并不重要。

懒惰的动物文本可能被包装在一个额外的元素，但我必须再次检查。

当前回答

在理想情况下，您只需使用以下css即可实现此目标

<style type="text/css">

span {
  display: inline-block;
  width: 50px;
}

</style>

这适用于除FF2及以下版本外的所有浏览器。

Firefox 2及更低版本不支持此功能价值。你可以使用-moz-inline-box，但要知道这和内联块，它可能不能作为在某些情况下。

引用自quirksmode

其他回答

当然，还有蛮力法:

<li><pre>    The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR  The active goldfish.</pre></li>

或者这就是你说的"填充"文本的意思?在这种情况下，这是一个模棱两可的工作。

这听起来有点像家庭作业。我希望你不是想让我们帮你做作业吧?

标记需要设置为display:block，因为它是一个内联元素，将忽略width。

so:

<style type="text/css"> span { width: 50px; display: block; } </style>

然后:

<li><span>&nbsp;</span>something</li>
<li><span>AND</span>something else</li>

<style type="text/css">

span {
  position:absolute;
  width: 50px;
}

</style>

您可以使用此方法为内联元素分配宽度

ul { list-style-type:没有; padding-left: 0 px; ｝ Ul li span { 浮:左; 宽度:40像素; ｝ < ul > <li>懒狗 <li>AND懒猫 <li>OR活动的金鱼 < / ul >

就像Eoin说的，你需要把一个非中断空间到你的“空”跨度，但你不能给一个内联元素分配宽度，只有填充/边距，所以你需要让它浮动，这样你就可以给它一个宽度。

有关jsfiddle的示例，请参见http://jsfiddle.net/laurensrietveld/JZ2Lg/

试试这个

> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">

推荐文章