2

我有很多 LI，我使用 inline-block 水平放置。

它工作得很好，我明白了

| [LI1]-[LI2]-[LI3] |
| [LI4   ]-[LI5]    |
| [LI6]-[LI7]-[LI8] |

在我的浏览器上，取决于窗口宽度和单个 LI 的宽度。

我希望在一些 LI 之后，“换行符”。例如，在 LI2 之后放置一个“换行符”，我会看到

| [LI1]-[LI2]       |
| [LI3]-[LI4   ]    |
| [LI5]-[LI6]-[LI7] |
| [LI8]             |

当然，也有可能是 LI3 打破了界限。

我可以完全控制每个 LI 的 CSS。

谢谢！

4

2 回答 2

0

我不会使用 CSS 技巧来做到这一点——我会修改我的 HTML 以反映您要显示的列表的结构。

在这里你可以说每个水平的集合<li>都是它自己的<ul>。所以你有一个列表列表。

检查这个 JsFiddle。通过这种方式，您可以获得结果，而不会隐藏在某些 CSS 中的行为，并且很容易看到您的标记中发生了什么。

编辑：好的，因为您无法触摸 HTML，您可以将所有内容浮动到左侧，然后在每一行中<li>制作第一个。请参阅对 JsFiddle 的此编辑...<li>clear:left

于 2013-02-01T15:21:51.430 回答
0

If you want a specific element to "line break" you just need to add a clear.

.myelement {
  clear: both;
}


<li>Hi</li>
<li>There</li>
<li class="myelement">Neighbor!</li>

Elements naturally migrate to the left. If all the elements are set to float: left, they will all migrate to the left and then break each time they run out of room. clear:both; makes them be the only item on that line.

于 2013-02-01T16:30:26.033 回答