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.

“或”的理由并不重要。

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

871989 次浏览
小开
最佳答案 

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/

小开

不幸的是，内联元素(或具有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">&nbsp;</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>
小开

您可以使用表来实现，但它不是纯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>

注意，它的显示并不完全像您想要的那样，因为它在每个选项上切换行。然而，我希望这能帮助你更接近答案。

小开

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

所以:

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

然后:

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

在理想情况下，您只需使用以下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>

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

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

小开

在这种情况下，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元素格式化为绝对元素，并且在top:0;left:0;处，因此它保持在左上方，并且设置padding-left(或:padding:0px 0px 0px 80px;)来为span元素设置此空闲空间。

对于简单的情况，它应该工作得更好。

小开 
<style type="text/css">


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


</style>

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

小开

试试这个

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

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>

小开

使用HTML 5.0，可以使用<span>或<div>来固定文本块的宽度。

enter image description here

对于<span>，重要的是添加以下CCS行

display: inline-block;

对于空的<span>，重要的是添加&nbsp;空格。

我的代码如下

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;
}
&lt;DIV&gt;


<div class='test'>ABCDEF</div>


&lt;SPAN&gt;


<div>
<span class='test'>ABCDEF</span>
</div


<br>


<ul>
<li><span class='tab'>&nbsp;</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 span CSS选择器不能在我的PC上工作!


提交答案