Как решить проблему с вёрсткой навигационной панели с описанием?

Question

[Palax]

При position: absolute ссылка в кнопках ведет себя как обычно, располагаясь по всей площади li списка, но тогда описание, заключенное в теги , не центрируется и выглядит коряво, не вмещаясь в поля кнопки. Буду благодарен за ответы.

Comments

[metaf]

Ответы на что?? Чего вам надо добиться-то?

[Palax]

metaf: Чтобы область ссылки покрывала всю площадь кнопки как в первом варианте, но с центрированным параграфом под названием, как во втором варианте.

Answer 1

[metaf]

Я когда только начинала верстать, мне постоянно твердили, что правильно заданный вопрос уже содержит в себе ответ...
Предположим, у вас структура

<li>
	<a href="#">link</a>
	<span>description</span>
</li>

Когда параграфа нет, под надписью должно быть пустое пространство: a {margin-bottom: Xpx}, где X = высота параграфа.
Когда параграф есть, пустое пространство должно сбрасываться: a:not(:last-child) {margin-bottom: 0}.
Параграф должен быть центрирован, не переноситься по словам и растягивать ячейку на свое содержимоеli {text-align: center} span {white-space: nowrap}

Вам это нужно? codepen.io/olgar/pen/EyNEXK

Comments

[Palax]

Спасибо за ответ, но нужен был чуточку иной результат. Чтобы область параграфа была частью этой ссылки, но при этом как бы оставалась центрированной таким образом.

[metaf]

Palax: так? codepen.io/olgar/pen/QEGxKq

[metaf]

Palax: или так? :) codepen.io/olgar/pen/EyNEXK

[Palax]

metaf: Показалось, что решил проблему благодаря вашим советам, однако возникла другая проблема, все ячейки, кроме первого, работают и выглядят исправно, поскольку в первом содержимое без описания, короче и общие паддинги влияют на него по-другому. Вот так. https://pp.vk.me/c604430/v604430771/10de6/CoRK3CJJ...

[metaf]

Palax: Ну у вас и правда отступ слева больше отступа справа (как по мне, отступы одинаковые на всех ячейках). Перепроверьте ваш код, может поставите padding-left=padding-right для всех?

[Palax]

metaf: Согласен, но проблема немного в другом, к примеру в других ячейках область ссылки по всей площади ячейки, но в первом внизу просто пустое пространство, поскольку общий падинг с учетом параграфа, которого нет в первой ячейке.
https://pp.vk.me/c630219/v630219771/36cd2/Y0Pf1rxk...

[metaf]

Palax: Посмотрите эту ссылку еще раз, codepen.io/olgar/pen/EyNEXK - тут кликабельна вся область линки. Может, у вас где-то перекрываются стили? или структура html не такая, как у меня?

[Palax]

metaf: О, спасибо за наставления! Переписал с начала, исходя из вашего примера и за изменением одной детали, все выглядит прекрасно.