CSS make UL list wrap 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;
}

目前

想要的

这里的代码笔：http://codepen.io/ptimson/pen/IrCHB

Answer 1

迄今为止，您可以单独使用 CSS 执行此操作的唯一方法是使用媒体查询 - 每个必要的 #columns 布局都需要一个媒体查询。

使用 css 可能会非常乏味。

幸运的是，您可以使用 LESS 等预处理器自动执行此操作。

所以说我在<ul> 中有<li> 的基本标记...

以下是利用 LESS 设置媒体查询的方法：

CODEPEN - 调整窗口大小以查看实际情况

首先根据你需要的设计设置一些较少的变量：

@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

然后：

像这样设置一个迭代混合：（您可以将此代码粘贴到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);

Answer 2

将此添加到列表的父 <ul>

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

这将导致 <li> 按您的意愿包装。然后在<li> 元素的右侧添加一些边距/填充，使它们的间距合理。

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>

css

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

这不是“错误”（我不认为）。这只是在一条线上设置元素的方式。您希望键入的单词之间的空格是空格吗？这些块之间的空格就像单词之间的空格一样。这并不是说规范不能更新为内联块元素之间的空格应该是什么，但我相当肯定这是一个不可能发生的巨大蠕虫。

这里有一些方法可以消除差距并让内联块元素直接相邻。

删除空格 获得空格的原因是，元素之间有空格（为了清楚起见，换行符和几个制表符算作空格）。最小化的 HTML 将解决这个问题，或者这些技巧之一：

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

或

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

或者用 cmets...

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

Answer 4

把wrap的宽度改成435px-ish，应该就是了！