HTML + CSS: ширина 'a' не работает - PullRequest
Новая
       0

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

39 голосов
/ 16 января 2011

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

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: Как это исправить?

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

Ответы [ 7 ]

105 голосов
/ 16 января 2011

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

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

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

Сделать его элементом блока, используя display: block;, или встроенным блоком display: inline-block;.

5 голосов
/ 16 января 2011

сделать блок для тега привязки добавить 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 голосов
/ 16 апреля 2013

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

3 голосов
/ 16 января 2011

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

.menu A
    {
        display: block;
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }
2 голосов
/ 16 января 2011

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

2 голосов
/ 16 января 2011

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

0 голосов
/ 07 сентября 2013 
.menu A
    {
        float: left;
        height:25px;
        width:170px;
        background:url(./images/button-51.png);
        padding:2px 5px ;
    }
...