MaryT
@MaryT
IT люблю

Border или text-decoration?

Здравствуйте! Подскажите, пожалуйста, как оформить такую менюшку? Вооруженным глазом видно. что между эл-тами списка есть две линии - темная и серая:
Из макета:
cd7e0aab1e0b4dfa87757611a4ed9355.jpg

Моё:
442bbc37367a41c18cf9c95b470a41c1.jpg
идеально подошел бы border, если бы только это подчеркивание было не такое длинное. Начинаю сомневаться.
Благодарю за помощь. Всем тепла!
  • Вопрос задан
  • 254 просмотра
Пригласить эксперта
Ответы на вопрос 6
это бордер тега li, просто,как мне кажется там общий padding задан по бокам для всего меню в целом
Ответ написан
Комментировать
dmitriy_novikov
@dmitriy_novikov
Занимаюсь web-разработкой с 2010г. http://dmnv.ru
padding у родителя меню, а там как угодно - хоть border, хоть background... но только не text-decoration. он не для этого предназначен.
Ответ написан
Комментировать
In4in
@In4in
°•× JavaScript Developer ^_^ ו°
Делаем ссылке внутри li display: block;, немного padding-bottom и бордер.
При этом нужно добавить padding по бокам самому элементу списка.

--» ☼ Пример ☼ «--
Ответ написан
Комментировать
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Думаю суть уловите https://jsfiddle.net/webirus/61ot84tf/10/

UPD: Пофиксил ссылку на Fidl, что-то глюкануло.

UPD2: Добавил ссылки и чтобы нижний паддинг был, после последнего элемента.
Ответ написан
27cm
@27cm
TODO: Написать статус
https://jsfiddle.net/h99hq106/
ul {
    padding: 1em;
}

ul li {
    border-bottom: 1px solid #0F0F0F;
}

ul li:last-child {
    border-bottom: none;
}

ul li + li {
    border-top: 1px solid #262626;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы