并排列表项作为 div (css) 中的图标

Question

我正在寻找一种方法来创建

<ul>

的项目，我可以将其放入

<div>

中，并让它们并排显示并在浏览器窗口大小调整时换行到下一行。

例如，如果列表中有 10 个项目，当前第一行显示 5 个项目，第二行显示 5 个项目，当用户将浏览器窗口拉宽时，它会变成第一行 6 个项目和第二行 4 个项目在第二行等

我正在寻找与 Windows 资源管理器在图块/图标/缩略图视图中执行的功能类似的功能。 我能够创建我想要的尺寸、颜色、内容等。我只是在包装/清理/等方面遇到麻烦。部分。

Answer 1

<li>

浮动：左（或右）

它们都将排在同一行，直到容器中没有更多空间（您的情况是

<li>

）。

如果浮动元素后面有一个块元素，它也会粘在浮动元素上，除非你给它一个

<ul>

，或者在它前面放一个空的div并用

clear: both;

。

Answer 2

clear: both;

CSS 将是：

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

现在，由于您已将显示模式从“块”（隐含）更改为“内联”，因此应用于 li 元素的任何填充、边距、宽度或高度样式都将不起作用。  您需要在 li 中嵌套一个块级元素：

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

并添加以下 CSS：

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

该解决方案背后的关键概念是将 li 的显示样式更改为“内联”，并在其中嵌套块级元素以实现一致的平铺效果。

Answer 3

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

。

display: inline;

在 IE 中搞砸了。这是我如何处理它的一个例子：float

这是CSS：

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

此外，如果您使用浮动，则 

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

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

不会环绕

ul

，在此示例中，高度将为 0：li

Answer 4

CSS 3 flex-flow

会发挥魔法

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

/* This code will do the magic. */
.flex-container {
  display: flex;
  flex-flow: row wrap;
}

/* This code is just to style the inner div elements. */
.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

Answer 5

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

还要确保放置它们的容器以 100% 的宽度浮动或使用其他技术来确保浮动的项目包含在其中及其下面的后续项目中。

Answer 6

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

CSS：

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

Answer 7

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

Answer 8

.classname ul li {
    float: left;
}

是否可以解决问题的人来说，它确实可以解决问题，但就我而言，它也清除了下一个元素的边距，因此我的页脚直接粘在图像下方我使用

clear:both

对齐。在我看来，更好的方法是在对齐元素下方使用一个新的空 div 类

float:left

Answer 9

HTML

<div style="clear:both"></div>

CSS

<ul class="nav__top-nav-country">
<li class="nav__top-nav-locales-country-name-list">
 United Kingdom </li>
<li class="nav__top-nav-locales-country-name-list">
 Ireland </li>
<li class="nav__top-nav-locales-country-name-list">
 Netherlands </li>
<li class="nav__top-nav-locales-country-name-list">
 France </li>
<li class="nav__top-nav-locales-country-name-list">
 Germany </li>
<li class="nav__top-nav-locales-country-name-list">
 Belgium </li>
</ul>

Answer 10

.nav__top-nav-country {
display: grid;
grid-template-columns: 1fr 1fr;
}

/* This code will do the magic. */
.flex-container {
  display: flex;
  flex-flow: row wrap;
}

/* This code is just to style the inner div elements. */
.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}