Элементы списка рядом друг с другом в виде значков в элементе div (css)

Question

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

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

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

Answer 1

дать LI float: влево (или вправо)

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

Answer 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' и вкладываете элемент уровня блока внутрь, чтобы добиться согласованного эффекта листов.

Answer 3

Вот хороший ресурс для упаковки колонных списков. http://www.communitymx.com/content/article.cfm?cid=27f87

Answer 4

Я бы порекомендовал вам использовать 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;
}

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

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

Answer 5

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

.classname ul li {
    float: left;
}

Answer 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;
}

Answer 7

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

ul.myclass li {float: left; дисплей: inline}

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