Как установить высоту / ширину ссылки: с помощью CSS?

Question 1

Я просто не могу установить высоту и ширину aэлементов навигации.

#header div#snav div a{
    width:150px;
    height:77px;
}

#header div#snav div a:link{
    width:150px;
    height:77px;
}


#header div#snav div a:hover{
    height:77px;
    background:#eff1de;
}

Есть идеи, что я делаю неправильно?

Question 2

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

a-tag - это встроенный элемент, поэтому ваши высота и ширина игнорируются.

#header div#snav div a{
    display:block;
    width:150px;
    height:77px;
}

Question 3

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

Также проверьте, line-heightчто может быть интересно в этом.

Question 4

Ваша проблема, вероятно, в том, что aэлементы display: inlineпо своей природе. Вы не можете установить ширину и высоту встроенных элементов.

Вы бы набор display: blockна a, но это принесет другие проблемы , потому что ссылки начинают вести себя как блочные элементы. Наиболее распространенное лекарство от этого - дать им возможность float: leftвыстроиться бок о бок.

Question 5

Из определения высоты :

Применимо к: всем элементам, кроме незамещенных встроенных элементов, столбцов таблицы и групп столбцов

aЭлемент по умолчанию встроенный элемент (и это не замененный).

Вам нужно изменить отображение (напрямую с помощью свойства display или косвенно, например, с помощью float).

Question 6

Спасибо RandomUs 1r за это наблюдение:

изменив его на display: inline-block; решает эту проблему. - RandomUs1r 14 мая '13 в 21:59

Я сам пробовал использовать его для верхней панели меню навигации, а именно:

Сначала задайте стиль элементу «li» следующим образом:

дисплей: встроенный блок;
ширина: 7em;
выравнивание текста: центр;

Затем стилизуйте элемент "a"> следующим образом:

ширина: 100%;

Теперь все навигационные ссылки имеют одинаковую ширину с текстом по центру каждой ссылки.