Как между двумя ul между «обсуждения» и «читать» дорисовать нижнюю линию на одном уровне?
При этом что - бы линия строго начиналась от строго "обсуждения" а заканчивалась строго "читать". Третий день ломаю голову , перепробовал множество вариантов получаться только через костыли это сделать а хочется по нормальному - как бы это реализовать?. Да и самому стало очень интересно. На первом фото как хотелось - бы, на втором пока чего добился.
Дополнительно:
ну вы хоть пример кода предоставили бы...
Вариантов несколько. Вот один из них:
snippet
- Огромное спасибо.
- Все оказалось так просто - голова у меня вообще не работает. Спасибо еще раз большое.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы добавить нижнюю линию между двумя элементами списка ul на одном уровне, можно использовать CSS свойство border-bottom. Ниже приведен пример кода, который поможет вам решить данную проблему:
ul { list-style: none; padding: 0; } ul li { margin-bottom: 10px; border-bottom: 1px solid black; } <ul> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul>ul { list-style: none; padding: 0; } ul li { margin-bottom: 10px; border-bottom: 1px solid black; } <ul> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul>
В данном примере мы используем CSS свойство border-bottom для элементов списка ul. Устанавливаем толщину линии и ее цвет. Таким образом, между каждым элементом списка будет отображаться нижняя линия, разделяющая элементы друг от друга.
Если вам нужно добавить нижнюю линию только между определенными элементами списка, то можно использовать псевдокласс :not(). Например, если вы хотите добавить линию только между "обсуждения" и "читать", то код будет выглядеть примерно так:
ul { list-style: none; padding: 0; } ul li { margin-bottom: 10px; } ul li:not(:last-child) { border-bottom: 1px solid black; } <ul> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul>ul { list-style: none; padding: 0; } ul li { margin-bottom: 10px; } ul li:not(:last-child) { border-bottom: 1px solid black; } <ul> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul>
Теперь нижняя линия будет добавлена только между элементами "обсуждения" и "читать". Надеюсь, это поможет вам решить вашу проблему!