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

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

或评论...

<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，应该是这样！