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）自动执行此操作。

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

以下是利用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＆amp; 7）中是有问题的，但如果你不关心那些浏览器，至少你可以保持代码格式清洁。

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

略过结束标记 HTML5无论如何都不关心。虽然你必须承认，但感觉很奇怪。

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

Answer 4

将换行宽度更改为435px-ish，应该是它！