CSS如何使UL列表中的LI元素换行？

Question

我希望您能够使黄色的UL水平包裹紫色的LI列表元素而无需为UL设置任何固定宽度。 该示例已添加包装。

HTML

  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

</div>

CSS

.wrap {
  background: green;
  width: 500px;
  padding: 10px 20px;
}

li {
  display: inline-block;
  width: 70px;
  height: 50px;
  background: purple;
  list-style: none;
}

ul {
  background: yellow;
  margin: 0; padding: 0;
}

当前

期望的

这里是CodePen：http://codepen.io/ptimson/pen/IrCHB

- ptimson

---

li必须有一个固定的宽度为70px吗？ - Ani

请注意，calc在大多数移动浏览器上无法使用（我认为目前仅适用于Firefox移动版），Opera浏览器和IE >= 9。 - kosmos

我不想设置UL的宽度，因为它会在我的实际示例中调整大小。好吧，看起来唯一可行的方法是使用JS解决方案。 - ptimson

@ptimson - 或许 这个 是你正在寻找的。 - Danield

@Danield 这看起来就是我想要的，谢谢。 - ptimson

Answer 1

将此内容添加到列表的父级<ul>中。

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

这将使<li>像您所希望的那样换行。然后在<li>元素的右侧添加一些边距/填充，使它们之间保持合理的间距。

- Lyall

Answer 2

迄今为止，只有使用媒体查询才能仅通过CSS实现此目的 - 每个所需的＃columns布局一个媒体查询。

使用CSS可能会非常乏味。

幸运的是，您可以使用预处理器（如LESS）自动完成此操作。

因此，假设我有一个基本的标记，其中包含<ul>中的<li>...

以下是如何利用LESS设置媒体查询的方法： CODEPEN - 调整窗口大小以查看其效果

首先根据所需的设计设置一些LESS变量：

@item-width:100px;
@item-height:100px;
@marginV: 4px;
@marginH: 2px;
@min-cols:2;
@max-cols:9; //set an upper limit of how may columns you want to write the media queries for

接下来：

设置一个迭代mixin，代码如下：（你可以将这段代码粘贴到http://less2css.org）

.loopingClass (@index-width) when (@index-width <= @item-width * @max-cols) {
    @media (min-width:@index-width) {
        .container{
            width: @index-width;
        }
    }

    .loopingClass(@index-width + @item-width + 2*@marginH);
}

.loopingClass (@item-width * @min-cols + @min-cols*@marginH*2);

- Danield

Answer 3

<div class="wrap">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li><br>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

CSS

.wrap {
  display:table;
  background: green;
  padding: 10px 20px;
}
ul {
    display:table;
  background: yellow;
  margin: 0;
  padding: 0;
    font-size: 0;
}
li {
  margin:0 4px 4px 0;
  display: inline-block;
  width: 70px;
  height: 50px;
  background: purple;
  list-style: none;
}
li:nth-child(7){
    margin-right: 0px;
}

******************************************************************

其他

<div class="wrap">
<ul>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</div>

也

<div class="wrap">
<ul>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
  </ul>
</div>

样式表

.wrap {
  background: green;
  width: 520px;
  padding: 10px 20px;
}
ul {
  background: yellow;
  margin: 0;
  padding: 0;
  border:0;
}
li {
  position:relative;
  display: inline-block;
  width: 70px;
  height: 50px;
  background: purple;
  list-style: none;
  margin-right: 5px;
}
li:nth-child(7){
    margin-right: 0px;
}
li:nth-child(14){
    margin-right: 0px;
}

这不是一个“bug”（我认为）。这只是设置行元素的方式。你想要输入的单词之间有空格，对吧？这些块之间的空格就像单词之间的空格一样。这并不是说规范不能更新为内联块元素之间的空格应该是没有的，但我相当确定这是一个巨大的问题，不太可能发生。

以下是一些解决间隙并使内联块元素直接相邻的方法：

删除空格 你得到空格的原因是因为，在元素之间有空格（换行和几个制表符都算作空格，只是为了明确）。最小化的HTML将解决此问题，或者使用以下其中一种技巧：

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

或者

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul

或者带有注释...

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

它们都很奇特，但它能解决问题。

负边距 您可以使用负4px的边距将元素移回原位（可能需要根据父元素的字体大小进行调整）。显然，在旧版IE（6和7）中存在问题，但如果您不关心这些浏览器，至少可以保持代码格式的清洁。

display: inline-block;
  margin-right: -4px;

跳过闭合标签吧，HTML5 也不在意。虽然你得承认，这感觉有点奇怪。

<ul>
  <li>one
  <li>two
  <li>three
</ul>

- alessandrio

---

<br>方法使代码无效。 - Frank Conijn - Support Ukraine

Answer 4

将包装的宽度更改为约435像素，就可以了！

- Geroy290