列出2列带有直边框的项目

Question

我有一个清单项目。我想要实现的是在移动视图中，我希望列表连续显示2个项目。

因此，我将UL标签设置为columns: 2。效果很好，但缺点是，由于这些项目具有top-top属性，因此它们在中间将是一个行距。

我可以知道是否有一种方法可以使边框全角无间隙且无需更改为其他html标签（因为此列表格式是由WordPress小部件生成的）

这是问题的一个例子。

ul {
  display: block;
  columns: 2;
}

li {
  border-top: 1px solid #e9e9e9;
  list-style: none;
}

<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
<li>TEST 5</li>
<li>TEST 6</li>
<li>TEST 7</li>
<li>TEST 8</li>
</ul>

Answer 1

使用font-size: 0;到ul和font-size: 15px;到li

ul {
  display: block;
  columns: 2;
  font-size: 0;
}

li {
  border-top: 1px solid black;
  list-style: none;
  font-size: 15px;
}

<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
<li>TEST 5</li>
<li>TEST 6</li>
<li>TEST 7</li>
<li>TEST 8</li>
</ul>

Answer 2

您可以仅将column-gap: 0;用于ul

ul {
  display: block;
  -webkit-columns: 2;
  /* Chrome, Safari, Opera */
  -moz-columns: 2;
  /* Firefox */
  columns: 2;
  -webkit-column-gap: 0;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 0;
  /* Firefox */
  column-gap: 0;
}

li {
  border-top: 1px solid #e9e9e9;
  list-style: none;
}

<ul>
  <li>TEST 1</li>
  <li>TEST 2</li>
  <li>TEST 3</li>
  <li>TEST 4</li>
  <li>TEST 5</li>
  <li>TEST 6</li>
  <li>TEST 7</li>
  <li>TEST 8</li>
</ul>

  

始终使用带有新CSS样式的Webkit前缀以获得更好的支持

希望这对您有所帮助。

Answer 3

尝试使用column-gap: 0;。如果我对您的理解正确，那么这就是您所需要的。

ul {
  display: block;
  columns: 2;
  column-gap: 0;
}

li {
  border-top: 1px solid #e9e9e9;
  list-style: none;
}

<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
<li>TEST 5</li>
<li>TEST 6</li>
<li>TEST 7</li>
<li>TEST 8</li>
</ul>

Answer 4

您可以尝试使用弹性框的另一种方式

ul {
  display:flex;
  flex-wrap:wrap;
  box-sizing: border-box;
}

li {
  width:50%;
  padding: 5px 15px 5px 5px;
  border-top: 1px solid black;
  list-style: none;
  font-size: 15px;
  box-sizing: border-box;
}

<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
<li>TEST 5</li>
<li>TEST 6</li>
<li>TEST 7</li>
<li>TEST 8</li>
</ul>