时间戳

首页 > 解决方案 > 如何创建具有 1px 边框的框的浮动列表（使用 css）

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

问题描述

float: left如果我使用和 set将多个框（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;
}

标签： htmlcss

解决方案

.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并将 apadding-top: 1px放在父容器上（这样您仍然可以看到第一行的顶部边框）。

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

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

推荐阅读