HTML 标签宽度，想要固定但它会根据文本保持自动调整大小？

Question

我正在使用标签创建一些选项卡，然后我将在 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>

但是它不起作用？有人可以帮忙吗？

Answer 1

层是一个内联元素，你不能给内联元素一个宽度。尝试为 .button 设置 display:inline-block(注意这是 IE6 的 isn't supported)