如何创建没有左右边框的列表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实现thin。

Answer 1

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

对于双边框，您可以使用border-collapse: collapse

Answer 2

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

我们的想法是使用大多数简单的选择器，而不是分派class或id，这样就不需要接触你的脚本了：

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

包含https://www.w3.org/TR/css3-selectors/#first-child-pseudo和https://www.w3.org/TR/css3-selectors/#last-child-pseudo的结构化伪类https://www.w3.org/TR/css3-selectors/#structural-pseudos

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>

​

任何数量的行或cols都可以

​

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>

​