html - 在不改变 HTML 标记的情况下，将 multipe <li> 显示为单元格之间具有 1px 边框的多行

Question

是否可以创建类似于以下内容的内容:

html 标记基本上是一个 <ul>和 6 <li> .问题是，如果您始终定义 1px 的“边框”，它最终会以 2px 边框结束。有什么方法可以“折叠”边界吗？我希望这样我可以很容易地决定我是否想要每行 3 个，每行 4 个等等。目前，这是通过使用例如 width: 33.33333% 来完成的。显示 3，和 display: inline-block .

我不想通过 HTML 标记对每一行进行分组，假设每一行都在物理 <ul> 中。 .我试过 margin-left: -1px技术，但问题是整行会被移动说 3px向左。

是否有仅使用 CSS 的解决方案？

Answer 1

可能是这样的:

* {
  box-sizing: border-box;
}

li {
  width: 33.33%;
  display: block;
  float: left;
  background: #333;
  color: #fff;
  text-align: center;
  padding: 3px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
}
li:nth-child(3n) {
  border-right: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet"/>

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>