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

如果我使用

float:left

将多个框（div）堆叠在一起，并设置

边框：1px纯黑

，相邻框之间将有2px边框。（在框之间垂直移动，并且在框移动到下一行时水平移动。）

.box{
高度：自动；
溢出：隐藏；
填充：1px0；
左边框：1px纯色灰色；
}
.盒子{
宽度：200px；
高度：50px；
边框：1px纯色灰色；
左边框：0；
线高：50px；
文本对齐：居中；
浮动：左；
位置：相对位置；
页边顶部：-1px；
}

1.
1.
1.
1.
1.
1.
1.
1.

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

.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;
}

您所需要的只是：

.box{
页边顶部：1px；
左边距：1px；
}
.盒子{
宽度：200px；
高度：50px；
边框：1px纯色灰色；
线高：50px；
文本对齐：居中；
浮动：左；
页边顶部：-1px；
左边距：-1px；
}

1.
1.
1.
1.
1.
1.
1.
1.

下面是我将如何使用CSS变量实现它，因为它很酷：
（请参见我的代码中的注释）

/*添加了CSS变量，因为只有在需要时才可以在此处进行修改*/
：根{
--边框：1px纯色灰色；
}
.盒子{
显示：内联块；
宽度：自动；
保证金：自动；
/*添加了下面要做的。最后没用了*/
高度：自动；
溢出：隐藏；
/*添加了边框*/
边框顶部：var（--边框）；
左边框：var（--边框）；
}
.盒子{
宽度：200px；
显示：内联块；
高度：50px；
线高：50px；
文本对齐：居中；
浮动：左；
位置：相对位置；
/*添加了边框*/
右边框：var（--边框）；
边框底部：var（--边框）；
}

1.
1.
1.
1.

这可能会对您有所帮助：我认为这个示例不正确：有些边框是missing@fcalderan是的，你是对的，我的例子根本没有反应。我对它做了一些修改。你应该试着看看如果你有两行或更多行boxes@fcalderan我修改并添加了一个CSS变量，因为它很酷。您能帮助我解决在几行代码中父代码比子代码宽的问题吗？如果您运行代码段，它是否不能正常工作？如果是的话-你使用的是什么浏览器？它在Firefox或Chrome中不起作用。有些盒子之间有粗线。。你在使用哪种浏览器？@RaelB对我来说，它在谷歌浏览器、火狐浏览器、Edge浏览器和IE浏览器上都能正常工作。只是要确定：你是在代码片段上查看它，还是在其他地方尝试实现它？两者都有。也许你的屏幕分辨率太高了，你不会注意到这一点issue@RaelB不，同样的结果在我的家庭和工作电脑上。你的变焦设置为100%吗？按ctrl+0进行检查

.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;
}

.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;
}