Html 跨度中的 CSS 固定宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/257505/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS fixed width in a span
提问by jason saldo
Within an unordered list:
在无序列表中：
<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>
Adding a class or style attribute is permitted but padding the text and adding or changing tags is not allowed.
允许添加类或样式属性，但不允许填充文本和添加或更改标签。
The page is rendering with Courier New.
该页面正在使用 Courier New 呈现。
Goal is to have text after span lined up.
目标是将跨度后的文本排成一行。
The lazy dog.
AND The lazy cat.
OR The active goldfish.
Justification of the "OR" is unimportant.
“OR”的理由并不重要。
The lazy animal text may be wrapped in an additional element but I'll have to double check.
懒惰的动物文本可能包含在附加元素中，但我必须仔细检查。
回答by codeinthehole
In an ideal world you'd achieve this simply using the following css
在理想的世界中，您只需使用以下 css 即可实现这一点
<style type="text/css">
span {
display: inline-block;
width: 50px;
}
</style>
This works on all browsers apart from FF2 and below.
这适用于除 FF2 及以下版本的所有浏览器。
Firefox 2 and lower don't support this value. You can use -moz-inline-box, but be aware that it's not the same as inline-block, and it may not work as you expect in some situations.
Firefox 2 及更低版本不支持此值。您可以使用 -moz-inline-box，但请注意它与 inline-block 不同，并且在某些情况下它可能无法按预期工作。
Quote taken from quirksmode
回答by Stephen Caldwell
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>Like Eoin said, you need to put a non-breaking space into your "empty" spans, but you can't assign a width to an inline element, only padding/margin so you'll need to make it float so that you can give it a width.
就像 Eoin 所说的那样，您需要在“空”跨度中放置一个不间断的空间，但是您不能为内联元素分配宽度，只能使用填充/边距，因此您需要使其浮动，以便您可以给它一个宽度。
For a jsfiddle example, see http://jsfiddle.net/laurensrietveld/JZ2Lg/
有关 jsfiddle 示例，请参阅http://jsfiddle.net/laurensrietveld/JZ2Lg/
回答by Tamas Czinege
Unfortunately inline elements (or elements having display:inline) ignore the width property. You should use floating divs instead:
不幸的是，内联元素（或具有 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>
Now I see you need to use spans and lists, so we need to rewrite this a little bit:
现在我看到你需要使用跨度和列表，所以我们需要稍微重写一下：
<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>
回答by Aaron Powell
The <span>tag will need to be set to display:blockas it is an inline element and will ignore width.
该<span>标签将需要被设置为display:block，因为它是一个内联元件，并且将宽度忽略。
so:
所以：
<style type="text/css"> span { width: 50px; display: block; } </style>
and then:
进而：
<li><span> </span>something</li>
<li><span>AND</span>something else</li>
回答by Augustus Francis
<style type="text/css">
span {
position:absolute;
width: 50px;
}
</style>
You can do this method for assigning width for inline elements
您可以使用此方法为内联元素分配宽度
回答by Arturro
People span in this case cant be a block element because rest of the text in between li elements will go down. Also using float is very bad idea because you will need to set width for whole li element and this width will need to be the same as width of whole ul element or other container.
在这种情况下，人跨度不能是块元素，因为 li 元素之间的其余文本将下降。同样使用 float 是非常糟糕的主意，因为您需要为整个 li 元素设置宽度，并且该宽度需要与整个 ul 元素或其他容器的宽度相同。
Try something like this in html:
在 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>
and in the css
并在 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
so, when the li element is relative you format the span element to be as absolute and at the top:0;left:0; so it stays upper left and you set the padding-left (or: padding:0px 0px 0px 80px;) to set this free space for span element.
因此，当 li 元素是相对的时，您将 span 元素的格式设置为绝对的并且位于 top:0;left:0; 所以它保持在左上角，你设置 padding-left（或：padding:0px 0px 0px 80px;）来为 span 元素设置这个可用空间。
It should work better for simple cases.
对于简单的情况，它应该更有效。
回答by Rahmad Saleh
try this
尝试这个
> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">
回答by luiscubal
You can do it using a table, but it is not pure CSS.
您可以使用表格来完成，但它不是纯 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>
Note that it doesn't display exactly like you want, because it switches line on each option. However, I hope that this helps you come closer to the answer.
请注意，它的显示方式并不完全符合您的要求，因为它会在每个选项上切换行。但是，我希望这可以帮助您更接近答案。
回答by schlebe
Using HTML 5.0, it is possible to fix width of text block using <span>or <div>.
使用 HTML 5.0，可以使用<span>或固定文本块的宽度<div>。
For <span>, what is important is to add following CCS line
对于<span>，重要的是添加以下 CCS 行
display: inline-block;
For your empty <span>what is important is to add space.
对于你的空<span>，重要的是增加 空间。
My code is following
我的代码如下
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: I have defined tabclass because ul li spanCSS selector is not working on my PC !
PS：我定义了tab类，因为ul li spanCSS 选择器在我的电脑上不起作用！
回答by Pepe Unodostres
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>