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

85

Я просто не могу установить высоту и ширину 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;
}

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

html css Голосовать за
источник

Ответы:

196

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

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

#header div#snav div a{
    display:block;
    width:150px;
    height:77px;
}
Стейн Янссен
источник
24
Блок имеет побочный эффект: он создает новую строку после элемента.
Cobra_Fast
27

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

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

Cobra_Fast
источник
4
line-height также является отличным решением. Но когда текст в ссылке превышает 2 строки, пробелы между этими двумя строками становятся огромными.
Stijn Janssen
8

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

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

Пекка
источник
1
Их перемещение, вероятно, предотвратит расширение родительского элемента вокруг них.
Cobra_Fast
@Cobra Ага, но это легко исправить. В 2011 году нужен ли clearfix?
Пекка
1
Значит, нам нужно исправить здесь? Звучит не очень хорошо.
Cobra_Fast
5

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

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

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

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

Квентин
источник
4

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

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

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

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

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

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

ширина: 100%;

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

user123318
источник