Отзывчивый элемент списка - PullRequest
Новая
       7

Отзывчивый элемент списка

0 голосов
/ 30 апреля 2019

В адаптивном режиме мне нужно поместить несколько линий li в несколько строк li. Это не то же самое по ширине. Невозможно использовать%. Лис начнёт с попрошайничества в каждом ряду.

Как я могу это сделать?

enter image description here

Ответы [ 3 ]

2 голосов
/ 30 апреля 2019

Я бы порекомендовал CSS Flexbox для этого: 

ul {
    display: flex;
    flex-wrap: wrap
}

По мере уменьшения размера экрана вы увидите, что элементы li будут перенесены на следующую строку.

Пример: https://jsfiddle.net/rmfx4qdw/

1 голос
/ 30 апреля 2019

Вы можете сделать что-то подобное, увидеть эту скрипку 

ul li {
  display: inline-block;
  padding: 20px;
  border: 1px solid #000;
  border-radius: 20px;
  list-style: none;
  margin: 0 20px 20px 0;
}
0 голосов
/ 30 апреля 2019

Вот пример, который я сделал для жидких и фиксированных списков реагирования ( play с шириной окна, чтобы увидеть разницу между ними) https://jsfiddle.net/ahentea/0542ynvh/

Для списка жидкости: 

ul {
  display: block;
  width: 100%;
  clear: both;
  font-size: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul li {
  list-style: none;
  width: 25%;
  display: inline-block;
}

В приведенном выше примере каждый li имеет значение 25% из 100%, поэтому вы можете иметь 4 li в строке, но, используя nth-child, вы можете сделать любой из li имеют явную ширину, просто убедитесь, что она будет равна 100% всему, что попадет под нее.

Для списка с элементами фиксированной ширины: 

ul {
  display: block;
  width: 100%;
  clear: both;
  font-size: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul li {
  list-style: none;
  display: inline-block;
}
ul li:nth-child(1) {
  width: 300px;
}

ul li:nth-child(2) {
  width: 225px;
}

ul li:nth-child(3) {
  width: 130px;
}

ul li:nth-child(4) {
  width: 80px;
}

В этом случае, когда ширина контейнера не может вместить ширину каждого li, тогда они будут опускаться снизу от последнегок первому.

Pro tip , если вы решите реализовать этот метод, убедитесь, что ни один из li не превышает минимальное окно, иначе они будут переполнены.Например, если один из ваших li имеет ширину 450 px, то для всех окон шириной, меньшей 450 px, li будет overflow

Pro tip 2 Когдас помощью display: inline-block по умолчанию добавляются пробелы между элементами, которые можно освободить от этого, добавив к родительскому элементу font-size: 0

...