html - float child 的响应折叠边界

Question

我正在尝试实现折叠边框对表格和表格单元格的相同效果，但使用 float div(或内联 block div)，请注意设计也是响应式的。标记看起来有点像这样:

<div class="parent">
  <div class="Lev1">
    label
  </div>
  <div class="Lev1">
    <div class="lev2">list item</div>
    <div class="lev2">list item</div>
    ..variable amount of Lev2 child divs
  </div>
</div>

目前我的css是这样的

.parent {
  width:100%;
  border:1px solid #000;
}
.lev1 {
 float:left;
 border:0px;
}
.lev2 {
 float:left;
 border-right:1px solid #000;
}

在全屏时，所有子级水平堆叠，但在调整大小时，lev2 级子级开始垂直堆叠，然后缺少的顶部和底部边框变得明显。我希望能够在所有子元素周围放置一个 1px 的边框，并让边框相互折叠。

我尝试过使用负边距，但它们开始垂直加倍并出现问题。

不确定这是否可行，如果有人有想法就太好了。

Answer 1

我不确定您到底想要什么，但我设法使用负边距“折叠”了 .lev2 div 边框。

这是CSS:

.lev2 {
  float:left;
  border:1px solid #000;
  margin-top:-1px;
  margin-left:-1px;
}

看看能不能用here