Как установить: высота/ширина ссылки с помощью 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;
}

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

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

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

Ответ 5

Благодаря RandomUs 1r для этого наблюдения:

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

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

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

дисплей: встроенный блок;
ширина: 7м;
text-align: center;

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

ширина: 100%;

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