Як встановити: висоту / ширину посилання за допомогою 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;
}

Будь-які ідеї, що я роблю неправильно?

додати дисплей: блок;

a-тег - це вбудований елемент, тому ваша висота та ширина ігноруються.

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

Анкери повинні мати інший тип дисплея, ніж стандартний, щоб взяти висоту. display:inline-block;або display:block;.

Також перевірте, line-heightщо з цього може бути цікавим.

Ваша проблема, мабуть, в тому, що aелементи є display: inlineза своєю природою. Ви не можете встановити ширину та висоту вбудованих елементів.

Вам доведеться встановити display: blockна a, але це призведе до інших проблем, оскільки посилання починають поводитися як елементи блоку. Найпоширенішим ліками від цього є надання їм, float: leftщоб вони все одно вишикувались поряд.

З визначення висоти :

Застосовується до: усіх елементів, крім незамінених вбудованих елементів, стовпців таблиці та груп стовпців

Ан aЕлемент за замовчуванням вбудований елемент (і це не замінений).

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

Дякую RandomUs 1r за це спостереження:

змінивши його на відображення: вбудований блок; вирішує це питання. - RandomUs1r 14 травня '13 о 21:59

Я спробував це сам для верхнього рядка меню навігації наступним чином:

Спочатку сформулюйте елемент "li" наступним чином:

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

Потім стилізуйте елемент "a"> таким чином:

ширина: 100%;

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