Полноразмерные навигационные ссылки в списке

0

Это мой код:

http://jsfiddle.net/spadez/FbADY/5/

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

Я попытался установить ссылку с line-height же, как и на навигационной панели, но это не повлияло на высоту ссылок.

Теги:

3 ответа

0
Лучший ответ

Я считаю, вы хотите добавить:

a {
    text-decoration:none;
    font-size:40px;
}

а также

.navigation li a {
    color: #fff;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height:60px;
    padding-left: 30px;
    padding-right: 30px;
}

Демо можно найти здесь: http://jsfiddle.net/FbADY/8/

Поделиться
  • 0
    Единственная причина, по которой это работает, заключается в том, что вы увеличили размер шрифта, что не является хорошим решением.
  • 0
    Почему нет? ссылка nav имеет правильную высоту, а размер шрифта может иметь любую высоту, какую он пожелает. Я установил размер шрифта: 40 пикселей, чтобы выделить место, где он может установить размер обычного текста ...
Показать ещё 2 комментария
2 
.navigation li a {
    display: block;
    height:60px; /* same as header */
    line-height:60px; /* same as header */
}

Демо-версия JSfiddle

Поделиться
0

Если у вас есть такое требование, просто добавьте margin в li и padding в href.

Изображение 174551

li {
    list-style:none;
    margin: 20px 5px 15px;
}
a {
    text-decoration:none;
    padding: 15px 5px 15px;    
}

Демо-ссылка

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню