Как правильно верстать горизонтальный список (меню)?

#html #css

Имеется пример списка:


Пункт меню 1
Пункт меню 2
Пункт меню 3
Пункт меню 4
Пункт меню 5



Как правильно записать стили, чтобы сделать горизонтальное меню?

Просто есть вариант с float: left;, displat: inline; итп. Хочу увидеть, как делают
это профессионалы.



UPD: при li > display: inline-block; у li появляются боковые отступы, которые никак
не могу убрать, а чем проблема?

    

Ответы

Ответ 1

Пример с flexbox:



* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Monospace;
  font-size: 1.3rem;
}

.container {
  padding: 0 0.9375rem;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: white;
}

.navbar {
  background-color: crimson;
}

.navbar ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.navbar ul li {
  padding: 1rem;
  background-color: black;
}

  

    

      
Lorem
      
Ipsum
      
Dolor
      
Sit
      
Amet
    
  





Пример с flow-root & float: left:



* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Monospace;
  font-size: 1.3rem;
}

.container {
  padding: 0 0.9375rem;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: white;
}

.navbar {
  background-color: crimson;
}

.navbar ul {
  display: flow-root;
}

.navbar ul li {
  padding: 1rem;
  float: left;
  background-color: black;
}

  

    

      
Lorem
      
Ipsum
      
Dolor
      
Sit
      
Amet
    
  





Upd: Выделил li, сделал без отступов.


Ответ 2

Это один из вариантов....  flex.  Вот, что-бы не приходилось правиь ответ надо сразу
в вопросе отмечать что да как надо



ul {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  background: rgba(205, 115, 12, 0.1);
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
  background: red;
}

li {
  width: 19%;
  background: green;
  text-align:center;
}

  
Пункт меню 1
  
Пункт меню 2
  
Пункт меню 3
  
Пункт меню 4
  
Пункт меню 5



Ответ 3

обычно li{display: inline-block}
но если вам надо будет,чтобы значение list-style было отлично от none,тогда вам надо
использовать li {float: left}
в зависимости от адаптива,можно так же использовать flex или display: table, display:
table-cell

чтобы избавиться от отступов инлайн-блоков,задайте им font-size: 0;
а контенту после задайте нужный размер шрифта