Бок о бок элементы списка как значки в div (css)

Я ищу способ создать <ul> элементов, которые я могу поместить в <div>, и показать их бок о бок и переносить на следующую строку при изменении размера окна браузера.

Например, если у нас есть 10 элементов в списке, которые в настоящее время показывают 5 элементов в первой строке и 5 элементов во второй строке, поскольку пользователь делает окно браузера более широким, он превращается в 6 элементов в первой строке и 4 элемента во втором ряду и т.д.

Я ищу аналогичную функциональность для того, что делает Проводник Windows, когда в виде плит/значков/миниатюр. Я могу создать <li>, я хочу, насколько размер, цвет, контент и т.д. У меня просто возникают проблемы с упаковкой/очисткой/etc. часть.

Ответы

Ответ 1

введите LI float: left (или right)

Все они будут в одной строке, пока в контейнере не будет больше места (ваш случай, ul). (забыл): если у вас есть элемент блока после плавающих элементов, он также будет придерживаться их, если вы не дадите ему ясно: оба, ИЛИ поместите пустой div перед ним с ясными: both

Ответ 2

Это может быть чистым решением CSS. Дано:

<ul class="tileMe">
    <li>item 1<li>
    <li>item 2<li>
    <li>item 3<li>
</ul>

CSS:

.tileMe li {
    display: inline;
    float: left;
}

Теперь, поскольку вы изменили режим отображения с "блока" (подразумеваемого) на "встроенный", любые стили заполнения, поля, ширины или высоты, которые вы применили к элементам li, не будут работать. Вам нужно вложить элемент уровня блока внутри li:

<li><a class="tile" href="home">item 1</a></li>

и добавьте следующий CSS:

.tile a {
    display: block;
    padding: 10px;
    border: 1px solid red;
    margin-right: 5px;
}

Основной концепцией этого решения является то, что вы меняете стиль отображения li на "inline" и вставляете элемент уровня блока внутри, чтобы добиться согласованного эффекта черепицы.

Ответ 4

Используйте следующий код для плавания элементов и убедитесь, что они отображаются в строке.

ul.myclass li {float: left; display: inline}

Также убедитесь, что контейнер, в который вы их помещаете, имеет ширину 100% или какой-либо другой метод для обеспечения того, чтобы плавающие элементы содержались внутри него и следующие элементы под ним.

Ответ 5

Я бы рекомендовал использовать display: inline;. float завинчивается в IE. Вот пример того, как я буду обращаться к нему:

<ul class="side-by-side">
  <li>item 1<li>
  <li>item 2<li>
  <li>item 3<li>
</ul>

и здесь css:

.side-by-side {
  width: 100%;
  border: 1px solid black;

}
.side-by-side li {
  display: inline;
}

Кроме того, если вы используете float, ul не будет обтекать li и вместо этого будет иметь значение 0 в этом примере:

.side-by-side li {
  float: left;
}

Ответ 6

Я использовал комбинацию из вышеизложенного для достижения рабочего результата; Смените float на Left и отобразите Block the li HTML:

<ol class="foo">
    <li>bar1</li>
    <li>bar2</li>
</ol>

CSS

.foo li {
    display: block;
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 2px;
}

Ответ 7

добавьте эту строку в свой файл css:

.classname ul li {
    float: left;
}