HTML + CSS: ширина 'a' не работает

У меня есть следующий код:

Часть CSS:

<style type="text/css">
    .menu
    {
        width:200px;
    }

    .menu ul
    {
        list-style-image:none;
        list-style-type:none;
    }

    .menu li
    {
        margin:2px;
    }

    .menu A
    {
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }

    .menu A:link
    {
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }
</style>

Часть HTML:

Все работает нормально, но когда я добавляю элемент DOCTYPE в начале документа HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ширина элемента 'a' не учитывается.

Вопрос 1: Почему?

Вопрос 2: Как это исправить?

Спасибо большое!

Ответы

Ответ 1

Вопрос 1: Почему?

Потому что по умолчанию это не элемент .

Вопрос 2: Как это исправить?

Сделайте его блочным элементом с помощью display: block; или встроенного блока display: inline-block;.

Ответ 2

сделать блок для тега привязки добавить display:block в стиле

.menu a
{
    display:block;
    height:25px;
    width:170px;
    background:url(./images/button-51.png);
    padding:2px 5px ;
}

ПРИМЕЧАНИЕ. не повторяют все элементы класса .menu a:link.. просто добавьте изменения или новые стили. ПРИМЕЧАНИЕ. всегда использует строчные буквы в html и css-коде.

Ответ 3

добавить блок отображения в a:

.menu A
    {
        display: block;
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }

Ответ 4

По умолчанию ссылка является встроенным элементом; добавьте display: block; и он будет использовать ширину набора.

Ответ 5

CSS - это все о точке. В зависимости от этого атрибут займет свое место. Посмотрите Google University. Это поможет многому понять основы и немного дальше.

Ответ 6

Это сработало для меня, но поскольку я хотел, чтобы все мои ссылки были на одной строке, я использовал display: inline-block;

Ответ 7

.menu A
    {
        float: left;
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }