Html CSS - 跨度标签不支持宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1161477/
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 - width not honored on span tag
提问by chicane
I have a issue with one of my spans. Please consider the following styles:
我的一个跨度有问题。请考虑以下样式：
.form_container .col1che
{
float: left;
width: 4%;
text-align: left;
}
.form_container .col2che
{
float: left;
width: 80%;
text-align:left;
}
.form_container .col3che
{
float: right;
width: 13%;
text-align:right;
}
These 3 spans in my code:
我的代码中的这 3 个跨度：
<div class="row"><!-- start: "row" -->
<span class="col1che">
<?php //some db feeds ?>
</span>
<span class="col2che">
<?php //some db feeds ?>
</span>
<span class="col3che">
<?php //some db feeds ?>
</span>
<div class="clear"></div>
</div><!-- end: "row" -->
The problem occurs when there is no data to be displayed in "COL1CHE" (or maybe even in any of them although I'm not sure) when there is no data this span "collapses" and its width is not honored. This happens in Firefox, in IE it doesn't "collapse".
当没有数据显示在“COL1CHE”中（或者甚至可能在其中任何一个中，尽管我不确定）时，如果没有数据此跨度“折叠”并且其宽度不符合要求，就会出现问题。这发生在 Firefox 中，在 IE 中它不会“崩溃”。
I included a "clear" class to see if this helps but to no avail.
我加入了一个“clear”类，看看这是否有帮助，但无济于事。
Any ideas?
有任何想法吗？
采纳答案by Vincent Robert
display: blockwill nothelp you here because when float is activated, the elements is automatically switched to block mode, whatever its initial mode, so your width should work.
display: block在这里不会帮助您，因为当激活浮动时，元素会自动切换到块模式，无论其初始模式如何，因此您的宽度应该可以工作。
The problem may be with the empty <span>tag which might not be rendered because of some obscure rule I cannot remember. You should try preventing your span from being empty, maybe by adding a if the content is empty.
问题可能出在空<span>标签上，由于一些我不记得的晦涩规则，它可能无法呈现。您应该尝试防止您的跨度为空， 如果内容为空，则可以添加 a 。
回答by richard
Span is an inline element and you can therefore not set a width. To set a width you must first set it to a block element with
Span 是一个内联元素，因此您不能设置宽度。要设置宽度，您必须首先将其设置为块元素
display:block;
After that you can set a width. Since span is a native inline element, you can use inline-block too and it will even work in IE:
之后，您可以设置宽度。由于 span 是一个原生的内联元素，你也可以使用 inline-block，它甚至可以在 IE 中工作：
display:inline-block;
回答by jimyi
Width is not honored because span is an inline element. To fix this, add:
宽度不受尊重，因为跨度是内联元素。要解决此问题，请添加：
display: inline-block;
Depending on your situation, display: inline-blockmay be better than display: blockbecause any content after the span won't be forced onto a new line.
根据您的情况，display: inline-block可能比display: block因为跨度之后的任何内容都不会被强制换行要好。
回答by Keith Adler
To make this work simply add
为了使这项工作简单地添加
display: block;
To the style.
到风格。
回答by Andrei
Display blockand optionally float lefthelped me.
显示block和可选的浮动left帮助了我。
display: block;
float: left;
