<span> 标签的 CSS 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/621401/
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 of a <span> tag
提问by mars-o
I use <span>tags in my module titles,
e.g.
我<span>在模块标题中使用标签，例如
<span>Categories</span>.
<span>Categories</span>.
I specify the span's background color/image, width and height in css.
我在 css 中指定了跨度的背景颜色/图像、宽度和高度。
But the span's width depends on its content/text.
但是跨度的宽度取决于其内容/文本。
So, if I do <span></span>, with just a background image/color in css, nothing appears.
所以，如果我这样做<span></span>，在 css 中只有一个背景图像/颜色，什么都不会出现。
Of course, I want something to appear.
当然，我想要一些东西出现。
How can I resolve this?
我该如何解决这个问题？
回答by cobbal
spans default to inline style, which you can't specify the width of.
spans 默认为内联样式，您无法指定其宽度。
display: inline-block;
would be a good way, except IE doesn't support it
将是一个好方法，除了 IE 不支持它
you can, however, hack a multiple browser solution
但是，您可以破解多浏览器解决方案
回答by Chris Fulstow
You could explicitly set the display property to "block" so it behaves like a block level element, but in that case you should probably just use a div instead.
您可以在显示属性明确设置为“块”，所以它的行为就像一个块级元素，但在这种情况下，你应该只使用一个div来代替。
<span style="display:block; background-color:red; width:100px;"></span>
回答by cletus
You can't specify the width of an element with display inline. You could put something in it like a non-breaking space ( ) and then set the padding to give it some more width but you can't control it directly.
您不能使用内联显示指定元素的宽度。你可以在里面放一些东西，比如一个不间断的空格 ( ) 然后设置填充来给它更多的宽度，但你不能直接控制它。
You could use display inline-block but that isn't widely supported.
您可以使用 display inline-block ，但这并没有得到广泛支持。
A real hack would be to put an image inside and then set the width of that. Something like a transparent 1 pixel GIF. Not the recommended approach however.
真正的技巧是将图像放入其中，然后设置其宽度。类似于透明的 1 像素 GIF。然而，不是推荐的方法。
回答by Kelly Hays
I would use the paddingattribute. This will allow you add a set number of pixels to either side of the element without the element loosing its span qualities:
我会使用该padding属性。这将允许您向元素的任一侧添加一定数量的像素，而元素不会失去其跨度质量：
- It won't become a block
- It will float as you expect
- 它不会成为一个块
- 它会像你期望的那样漂浮
This method will only add to the padding however, so if you change the length of the content (from Categories to Tags, for example) the size of the content will change and the overall size of the element will change as well. But if you really want to set a rigid size, you should do as mentioned above and use a div.
但是，此方法只会添加到填充中，因此如果您更改内容的长度（例如，从类别到标签），内容的大小将会更改，元素的整体大小也会更改。但是如果你真的想设置一个刚性大小，你应该像上面提到的那样做并使用一个div。
See the box modelfor more details about the box model, content, padding, margin, etc.
有关框模型、内容、填充、边距等的更多详细信息，请参阅框模型。
回答by Nohy bez hranic
Like in other answers, start your span attributes with this:
像在其他答案中一样，用这个开始你的跨度属性：
display:inline-block;
Now you can use paddingmore than width:
现在您可以使用比宽度更多的填充：
padding-left:6%;
padding-right:6%;
When you use padding, your color expands to both side(right and left), not just right (like in widht).
当您使用填充时，您的颜色会扩展到两侧（右侧和左侧），而不仅仅是右侧（如宽度）。
回答by Antonio
Use the attribute 'display' as in the example:
使用属性 'display' 如示例中所示：
<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>
回答by user2130923
Having fixed the height and width you sholud tell the how to bahave if the text inside it overflows its area. So add in the css
固定高度和宽度后，您应该告诉如果其中的文本溢出其区域，如何处理。所以在css中添加
overflow: auto;
溢出：自动；
