@Rubix
Люблю кодить, разрабатываю проекты в разных сферах

Как сверстать черты между элементами?

Очередной мой вопрос про верстку~
Как сверстать черточки между элементами в меню?
61b1193d40bdb107764512.png
Вот, у меня есть HTML-разметка этого меню и стили.
<div class="topmenu">
	<div class="container">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Sale</a></li>
			<li><a href="#">Handbags</a></li>
			<li><a href="#">Wallets</a></li>
			<li><a href="#">Accessories</a></li>
			<li><a href="#">Mens Store</a></li>
			<li><a href="#">Shoes</a></li>
			<li><a href="#">Vintage</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact Us</a></li>
		</ul>
	</div>
</div>

.container {
	margin: 0 auto;
	width: 980px;
}
.topmenu {
	font-size: 19px;
}
.topmenu ul {
	display: flex;
	justify-content: space-between;
}
.topmenu li {
	text-transform: uppercase;
}
.topmenu li:not(:last-child):after {
	content: "|";
	margin-left: 20px; /* Тут неправильно */
}

Сами черты я добавил, но правильно их позиционировать, чтобы при изменении ширины контейнера они тоже адаптировались, не смог. Как тут сделать?
  • Вопрос задан
  • 113 просмотров
Решения вопроса 1
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
Сразу же отучайтесь использовать вложенные селекторы по типу ".topmenu ul" ".topmenu li" и прочие непотребства. Почитайте немного про именование по БЭМ и для начала просто задайте себе правило, что каждому элементу мы присваиваем класс с понятным именем и обращаемся конкретно к нему без вложений насколько это возможно.

Конкретно по вашему вопросу накидал пример учитывая вашу структуру:
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@vladis005
Начинающий веб разработчик
Воспользутесь свойством border-right
Ответ написан
Ваш ответ на вопрос

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

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