Как задать минимальный отступ между пунктами?

Question

[unlik]

Имеется меню в верстке codepen.io/aliencash/pen/VLaVee

При уменьшении окна пункты меню наезжают друг на друга. Как задать минимальное расстояние между пунктами меню?

Answer 1

[Павел Радьков]

.menu a {
  display: block;
  padding: 0 10px;
}

Comments

[unlik]

Не работает.

Answer 2

[Андрей Федоров]

Не надо min-width делать, теряется резиновость. Вот так сделайте:

.menu li {
  text-align: center;
  background: #c5f;
  width: 24%;
  margin-right: 1.33333333%;
}
.menu li:last-child {
  margin: 0;
}

Автор, как вы чему-то научитесь если сами думать не будете?

Comments

[unlik]

Так все равно наезжает.
Сначала гуглю и сам думаю. Если уже никак то сюда.

[Андрей Федоров]

Это мой код. У меня ничего не наезжает. Объясните толком. А лучше скриншот "наезда" сделайте.

[unlik]

gyazo.com/52c695b73df7a928f500a8c49536194f

[Андрей Федоров]

Отлично. Вопрос из разряда как построить дом площадью 15 соток на участке в 6. Во первых, вы стиль .menu не забыли скорректировать? В оригинале там 300px на логотип. Потом, что же вы хотите место мало, шрифт большой, слова длинные. Примените более узкий шрифт например. Уменьшите размеры фиксированных элементов.

Answer 3

[GreatRash]

Нафига у вас там calc? Делать двухколоночный макет при помощи инлайн-блоков... такого изврата я ещё не видел! У вас в вёрстке творится ад! Половина элементов вообще не нужны. Зачем вы комментируете переносы строк?

Answer 4

[petyagrill]

.menu li {
white-space:nowrap;
}

И уберите ширину