如何创建带有 1px 边框的框的浮动列表（使用 css）

Question

如果我使用float: left 将多个框（div）堆叠在一起并设置border: 1px solid black，则相邻框之间将有2px 的边框。 （垂直在盒子之间，当盒子移动到下一行时也是水平的。）

//html
<div class=boxes>
  <div class="box">1</div>
  <div class="box">1</div>
  <div class="box">1</div>
  <div class="box">1</div>
  <div class="box">1</div>
  <div class="box">1</div>
  <div class="box">1</div>
  <div class="box">1</div>
  <div class=last></div>
</div>

//css
.boxes {
  display: inline-block;
}

.last {
  clear: both;
}

.box {
  width: 200px;
  height: 50px;
  border: 1px solid gray;
  line-height: 50px;
  text-align: center;
  float: left;
  position: relative;
}

如何实现类似的布局，相邻块之间只有一个像素边框？

我想为父容器添加一个“左上角”边框，然后只为单个框设置“右下角”边框。这部分可行，但如果框列表流到下一行，那么顶部会有一条可见的线。

.boxes {
  border-top: 1px solid gray; 
  border-left: 1px solid gray;   
  display: inline-block;
  overflow: hidden;
}

.last {
  clear: both;
}

.box {
  width: 200px;
  height: 50px;
  border-bottom: 1px solid gray;
  border-right: 1px solid gray;
  line-height: 50px;
  text-align: center;
  float: left;
  position: relative;
}

Answer 1

.boxes {
   height: auto;
   overflow: hidden;
   padding: 1px 0 0 0;
   border-left: 1px solid gray;
}



.box {
  width: 200px;
  height: 50px;
  border: 1px solid gray;
  border-left: 0;
  line-height: 50px;
  text-align: center;
  float: left;
  position: relative;
  margin-top: -1px;
}

<div class="boxes">
  <div class="box box1">1</div>
  <div class="box box2">1</div>
  <div class="box box3">1</div>
  <div class="box box4">1</div>
  <div class="box box1">1</div>
  <div class="box box2">1</div>
  <div class="box box3">1</div>
  <div class="box box4">1</div>

</div>

基本上外部容器只是设置左边框，而内框在另一侧（不是左侧）有边框。诀窍是用负号margin-top: -1px 移动所有这些块，并在父容器上放置padding-top: 1px（这样您仍然可以看到第一行的顶部边框）。

我还删除了您仅为清除目的而插入的空元素：父容器上的height: auto 和overflow: hidden 就足够了（或寻找不影响溢出的 clearfix 类）。

如果您尝试调整视口大小，则边框永远不会重叠。

Answer 2

您可以使用边框框并浮动元素以提高响应速度

.boxes {
  float: left;
}
.box {
  height: 50px;
  width: 200px;
  float: left;

  box-shadow: 
    1px 0 0 0 gray, 
    0 1px 0 0 gray, 
    1px 1px 0 0 gray, 
    1px 0 0 0 gray inset, 
    0 1px 0 0 gray inset;
}

Example

Answer 3

你只需要：

.boxes {
  margin-top: 1px;
  margin-left: 1px;
}

.box {
  width: 200px;
  height: 50px;
  border: 1px solid gray;
  line-height: 50px;
  text-align: center;
  float: left;
  margin-top: -1px;
  margin-left: -1px;
}

<div class=boxes>
  <div class="box box1">1</div>
  <div class="box box2">1</div>
  <div class="box box3">1</div>
  <div class="box box4">1</div>
  <div class="box box1">1</div>
  <div class="box box2">1</div>
  <div class="box box3">1</div>
  <div class="box box4">1</div>
</div>

除了直接添加到 .box 之外，无需添加任何其他边框，margin 会发挥作用

编辑： 如果您要使您的设计像素完美，那么您应该使您的 .boxes 像：

.boxes {
  margin-top: 1px;
  margin-left: 1px;
  margin-bottom: -1px;
  margin-right: -1px;
}

它会抵消由边距创建的任何效果

Answer 4

我将这样做，使用 CSS 变量，因为它很酷：
（参见我的代码中的 cmets）

/* Added CSS variable, because it's nice to modify only here if needed */
:root{
  --border: 1px solid gray;
}

.boxes {
  display: inline-block;
  width: auto;
  margin: auto;
  /* Added the below to make .last useless */
  height: auto;
  overflow: hidden;
  /* Added for borders */
  border-top: var(--border);
  border-left: var(--border);
}

.box {
  width: 200px;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  text-align: center;
  float: left;
  position: relative;
  /* Added for borders */
  border-right: var(--border); 
  border-bottom: var(--border);

}

<div class=boxes>
  <div class="box box1">1</div>
  <div class="box box2">1</div>
  <div class="box box3">1</div>
  <div class="box box4">1</div>
  <!-- <div class="last"></div> No need for that -->
</div>

希望对你有帮助。