Сниппет простого горизонтального меню · GitHub

Сниппет простого горизонтального меню

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Show hidden characters

	nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	}
	nav li {
	display: inline-block;
	text-transform: uppercase;
	}
	. main-menu {
	text-align: center;
	font-size: em(15)
	}
	.main-menu > ul > li > a {
	display: inline-block;
	padding: 10px 18px;
	color: #7e91a4;
	text-decoration: none;
	}
	.main-menu > ul > li > a:hover {
	color: #414e5b;
	}
	. main-menu > ul > li.active a {
	color: #414e5b;
	text-decoration: underline;
	}

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Show hidden characters

	<nav>
	<ul>
	<li><a href=»#»>Главная</a></li>
	<li><a href=»#»>Монтаж</a></li>
	<li><a href=»#»>Проектирование</a></li>
	<li><a href=»#»>Оборудование</a></li>
	<li><a href=»#»>Контакты</a></li>
	</ul>
	</nav>

Как сделать так, чтобы список HTML отображался горизонтально, а не вертикально, используя только CSS?

Задавать вопрос

спросил 12 лет, 9 месяцев назад

Изменено 1 год, 6 месяцев назад

Просмотрено 174 тыс. раз

Мне это нужно, потому что я хочу, чтобы меню (созданное из HTML-списка) отображалось горизонтально.

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

Я также хотел бы убрать отступы подсписков. Является ли это возможным?

• html
• css
• меню
• позиционирование
• horizontallist

Вам придется использовать что-то вроде ниже

 #меню ул{
  стиль списка: нет;
}
#меню ли{
  дисплей: встроенный;
}

 <дел>
  <ул>
    
Первый пункт меню
    
Второй пункт меню
    
Третий пункт меню
  

 #menu ul {
  стиль списка: нет;
  маржа: 0;
  заполнение: 0;
  дисплей: встроенный гибкий
} 

 <дел>
  <ул>
    
1 пункт меню
    
2 пункт меню
    
3 пункта меню