如何创建没有左右边框HTML CSS的列表

Question

我想使用 Kendo 移动列表视图创建一个列表，如下所示：

   +--------+--------+--------+--------+
   1        |    2   |    3   |        4
   +--------+--------+--------+--------+
   1        |    2   |    3   |        4
   +--------+--------+--------+--------+
   1        |    2   |    3   |        4
   +--------+--------+--------+--------+
   1        |    2   |    3   |        4
   +--------+--------+--------+--------+

基本上没有左右边框的列表。
目前我正在使用div 显示此列表，但问题是我无法删除左右​​边框以及介于两者之间的（分隔线）我看到左右1px边界的双边框一起使其成为2px。

此外，第一列中的元素左对齐，最后一列中的元素右对齐，并位于中间。

我们如何使用 HTML 和 CSS 实现瘦。

Answer 1

您可以使用:first-child 和:last-child 伪选择器分别设置第一行和最后一行的样式。

双边框可以使用border-collapse: collapse

Answer 2

没有您的代码，我们将只使用 div。

我们的想法是使用最简单的选择器，我们可以使用它来代替调度类或 id，因此无需修改您的脚本：

组合器https://www.w3.org/TR/css3-selectors/#combinators

结构伪类https://www.w3.org/TR/css3-selectors/#structural-pseudos，包括https://www.w3.org/TR/css3-selectors/#first-child-pseudo & https://www.w3.org/TR/css3-selectors/#last-child-pseudo

body>div {
}
:first-child {
}
:last-child {
}
div + div {
}

body {
  display: table;
  margin: 1em auto;
  border-top: solid 1px;
}
div {
  border-bottom: solid 1px;
}
body>div {
  display: table-row;
  text-align: center;
}
div div {
  display: table-cell;
  width: 50px;
}
div div:first-child {
  text-align: left;
}
div div:last-child {
  text-align: right;
}
div div + div {
  border-left: solid 1px;
}

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

任何数量的行或列都可以

body {
  display: table;
  border-top: solid;
  margin: 1em auto;
}
div {
  border-bottom: solid;
}
body>div {
  display: table-row;
  text-align: center;
}
div div {
  display: table-cell;
  width: 50px;
}
div div:first-child {
  text-align: left;
}
div div:last-child {
  text-align: right;
}
div div + div {
  border-left: solid;
}

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>