Ширина меток HTML, требуется фиксированная, но она сохраняет автоматическое определение размера в соответствии с текстом?

Я создаю несколько вкладок с помощью меток, а затем собираюсь добавить некоторый простой наведение на 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>

но не работает? Кто-нибудь может помочь?

Ответ 1

слой является встроенным элементом, и вы не можете дать width встроенным элементам. попробуйте установить display:inline-block для .button (обратите внимание, что этот не поддерживается IE6)

Ответ 2

вам нужно добавить display:block, чтобы получить ширину для работы, а затем добавьте float:left, чтобы получить их в макете, как вы хотите

Ответ 3

Установите display: inline-block в класс .button, поскольку метки являются встроенными элементами, поэтому он не распознает вашу ширину.

Ответ 4

label.button {
    display: block;
    text-align: center;
    width: 100px;
}