Question

我正在寻找一种方法来创建<ul>个项目，我可以放在<div>中并让它们并排显示并作为浏览器窗口换行到下一行调整大小。

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

我正在寻找类似于Windows资源管理器在图块/图标/缩略图视图中所执行操作的功能。我可以根据尺寸，颜色，内容等创建我想要的<li>。我只是在包装/清除/等方面遇到了麻烦。一部分。

Answer 1

给LI浮动：左（或右）

它们都将在同一行，直到容器中没有空间（你的情况，ul）。（忘了）：如果你在浮动元素后面有一个块元素，他也会坚持使用它们，除非你给他一个明确的：两者，或者在它之前放一个空的div：两个

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

现在，由于您已将显示模式从“block”（隐含）更改为“inline”，因此应用于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

使用以下代码浮动项目并确保它们以内联方式显示。

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

同时确保您放入的容器以100％的宽度或其他技术浮动，以确保浮动物品包含在其中以及下面的物品中。

Answer 6

我使用上述组合来达到工作效果;将float更改为Left并显示阻止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

在css文件中添加以下行：

.classname ul li {
    float: left;
}

Answer 8

CSS 3 flex-flow 会变魔术

/* 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;
}

<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>

并排列表项作为div（css）中的图标

8 个答案: