Чтобы добавить нижнюю линию на одном уровне между элементами списка в HTML, можно использовать некоторые стили CSS. Для того, чтобы решить вашу задачу, можно воспользоваться псевдоэлементом ::after для элемента ul и применить стилизацию к этому псевдоэлементу.
Вот пример кода HTML, который можно использовать в качестве основы для решения задачи:
<ul class="menu"> <li>Главная</li> <li>Новости</li> <li>Обсуждения</li> <li>Читать</li> <li>Контакты</li> </ul>
Затем вы можете использовать CSS для добавления нижней линии между элементами "Обсуждения" и "Читать":
.menu {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu li {
display: inline-block;
position: relative;
margin-right: 10px;
}
.menu li::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background-color: black;
}
.menu li:last-child::after {
display: none; /* Чтобы не было лишней линии после последнего элемента */
}
В данном примере мы сначала сбросили стандартное стилизирование списка, затем использовали display: inline-block для элементов списка, чтобы они отображались горизонтально.
Затем мы добавили псевдоэлемент ::after к каждому элементу списка, установили ему позицию position: absolute и прижали его к нижним границам элемента с помощью bottom: -5px;. Остальные стили задают внешний вид линии.
В последней строке мы добавили правило display: none для псевдоэлемента последнего элемента списка, чтобы убрать лишнюю линию после последнего элемента.
Таким образом, после применения этих стилей к вашему списку, между элементами "Обсуждения" и "Читать" должна появиться нижняя линия на одном уровне.