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，應該是這樣！