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

это звучит немного безумно, но я просто не могу установить высоту и ширину 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;
}

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

5 74
html css

5 ответов:

добавить display: block;

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

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

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

на line-height что может быть интересно с этим.

26

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

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

7

С определение высоты:

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

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

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

5

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

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

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

первый стиль элемента " li " следующим образом:

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

затем введите элемент " a " > как следует:

ширина: 100%;

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

1