Як встановити: висоту / ширину посилання за допомогою css?


84

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

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

Відповіді:


193

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

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

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

24
Блок має побічний ефект, що він створить новий рядок після елемента.
Cobra_, Швидкий

27

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

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


4
line-height - також чудове рішення. Але коли текст у посиланні переходить через 2 рядки, пробіл між цими 2 рядками величезний.
Stijn Janssen

8

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

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


1
Плаваючи ними, можливо, заважатиме батьківському елементу розширюватися навколо них.
Cobra_, Швидкий


1
Тож нам потрібно виправити виправлення тут? Це звучить не дуже добре.
Cobra_, Швидкий

5

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

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

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

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


4

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

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

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

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

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

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

ширина: 100%;

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.