CSS 如何设置内联元素的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5137772/
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
How to set width of a inline element?
提问by Jichao
I want to design a tab header. The html code is,
我想设计一个标签页眉。html代码是，
<div class="tab-header">
<a href="" class="current">tab1-title</a>
<a href="">tab2-title</a>
</div>
Now I need to apply a background image to the current class, too make effect like this,
现在我需要将背景图像应用到当前类，也像这样产生效果，
But the inline element a is not big enough for this background image, so I adjust the width and height of the element a. But the adjustment failed, the width/height of the element did not change.
但是内联元素a对于这张背景图片来说不够大，所以我调整了元素a的宽高。但是调整失败，元素的宽高没有变化。
How could I get the right effect?
我怎样才能得到正确的效果？
Thanks.
谢谢。
回答by James Chen
To apply width, set css property 'display' to either 'block' or 'inline-block'.
要应用宽度，请将 css 属性“display”设置为“block”或“inline-block”。
block: the element will sit in a single line. In such case you may want to set float so links are in the same line;
块：元素将位于一行中。在这种情况下，您可能希望设置浮动，以便链接在同一行中；
inline-block; the element will have height, width, etc, and multiple elements will sit in the same line (block).
内联块；元素将具有高度、宽度等，并且多个元素将位于同一行（块）中。
回答by Josh Lee
回答by harpo
Use
用
display: inline-block;
on the inline element. With a little tweaking, this has wide cross-browser support and is incredibly useful for the kind of layout you're after.
在内联元素上。稍微调整一下，它就具有广泛的跨浏览器支持，并且对于您所追求的布局类型非常有用。
回答by ScottE
You'll have to use display:blockon the anchor.
你必须display:block在锚上使用。
