HTML 标签宽度，想要固定但它会根据文本自动调整大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3319219/
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
HTML Label widths, want fixed but it keeps auto-sizing according to text?
提问by Tom
I am creating some tabs using labels, then im going to add some simple hover over javascript. However i want all the labels to be of fixed size with the text in the centre. This is what i have:
我正在使用标签创建一些选项卡，然后我将在 javascript 上添加一些简单的悬停。但是我希望所有标签的大小都是固定的，文本在中心。这就是我所拥有的：
<style>
.button
{
border-style:solid;
border-width:1px;
background-color:rgb(193,203,225);
font: normal 14px arial, sans, sans-serif;
text-align:center;
color: rgb(54,95,145);
width:100px;
margin: 0px;
padding: 0px;
padding-top: 3px;
padding-bottom: 3px;
text-align: center;
}
</style>
<label id='Label5' class='button'> Personal Details </label>
<label id='Label1' class='button'> Education </label>
<label id='Label2' class='button'> Achievements </label>
<label id='Label3' class='button'> Work Experience </label>
<label id='Label6' class='button'> IT Skills </label>
<label id='Label4' class='button'> Languages </label>
but its not working? Could someone please help?
但它不工作？有人可以帮忙吗？
回答by oezi
a layer is a inline-element, and you can't give a widthto inline-elements. try to set display:inline-blockfor .button(note that this isn't supportedby IE6)
一个层是一个内联元素，你不能给width内联元素一个。尝试设置display:inline-block了.button（注意，这是不支持的IE6）
回答by Scott Evernden
you need to add display:blockto get widths to work, and then add float:leftto get them to layout the way you want
您需要添加display:block以使宽度起作用，然后添加float:left以使它们以您想要的方式布局
回答by ScottS
Set display: inline-blockto the .buttonclass as labels are inline elements so it does not recognize your width.
设置display: inline-block为.button类，因为标签是内联元素，因此它无法识别您的宽度。
回答by Taylor Edmiston
label.button {
display: block;
text-align: center;
width: 100px;
}
