你能跳过ul列表中的一行吗？

Question

我有一个无序的多个项目列表。我想在列表中的部分之间插入换行符而不会破坏ul组？这可能吗？

让我们说它看起来像这样：

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
</ul>

所以，让我们说在视觉上我希望列表在项目3和4之间或项目7和8之间显示换行符。有没有办法插入一个空白的LI项目作为换行符没有它显示一个子弹点？

Answer 1

您可以使用nth-child或nth-of-type，将margin-top设置为您想要的n孩子

您的案例的片段» _{item 3/4和7/8}

li:nth-child(4n+4) {
  margin-top:10px
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
</ul>

» _{item 3/4}

的摘录

li:nth-child(4) {
  margin-top:10px
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
</ul>

» _{item 7/8}

的摘录

li:nth-child(8) {
  margin-top:10px
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
</ul>

Answer 2

您可以在<li>上使用list-style：none，并且不会有空格。

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li style="list-style:none;">&nbsp;</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>

Answer 3

nth-child是一种方法（也使用*，但可能太多）。然后只需添加填充或边距即可将下一部分分成您需要的数量。

https://jsfiddle.net/vqjq9gcz/

ul li:nth-child(4n + 4){
  padding: 0px 0px 10px 0px;
}

Answer 4

将li:nth-child(x)与margin-bottom设置一起使用，其中x是您希望获得距离的行数，例如：

li:nth-child(3), li:nth-child(7) {
  margin-bottom: 20px;
}

http://codepen.io/anon/pen/rrmbGy

Answer 5

没有CSS，这可能有用。但是，我不确定验证或跨浏览器支持。

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li><br>
  <li>item 4</li>
  <li>item 5</li>
</ul>