Разместить кнопки в меню на одинаковое растояние и до конца экрана при разных разширениях

261
26 июля 2017, 20:32

Здравствуйте, как можно с помощью css разместить кнопки на нижнем меню нормально, чтобы при сжатии экрана они просто сближались друг к другуи когда уже силшком маленький экран падали вниз. Пробовал через % но угадывать, тыкать... да и падать тогда они начинают очень быстро. И + надо чтобы слева и справа был маленький отступ на ul

Answer 1

Используйте flex:

ul{ 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
  margin: 0; 
  padding: 0; 
} 
li{ 
  list-style: none; 
  padding: 10px 30px; 
  background-color: red; 
  border: 2px solid yellow; 
}
<ul> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
  <li>item</li> 
</ul>

Answer 2

вам лучше бы bootstrap использовать. А чтобы в зависимости от разрешения экрана изменялись используемые css правила нужно бы использовать блок @media{}. ограничение, броузер должен поддерживать стандарты css3.

READ ALSO
Динамическое создание input
HTML

Динамическое создание input

Есть функция:

 295
Смена значения value в submit при адаптиве css
HTML

Смена значения value в submit при адаптиве css

Доброго времени! Делаю адаптивное меню есть там одна кнопка типа submit вот:

 256
пишу тему на wordpress, возникли сложности с sidebar
HTML

пишу тему на wordpress, возникли сложности с sidebar

Пишу тему на wordpress, помогите, пожалуйста, разобраться почему у меня НЕ отображается на сайте sidebar, хотя в админке он появляется, я его заполняю,...

 309
Как сделать footer посередине?
HTML

Как сделать footer посередине?

Добавил в Footer класс navbar-fixed-bottom и Fotter прижался, но растянулся на всюКак сделать его таким же как и остальной контент по центру (выделил красным)

 285