如何使用CSS折叠一组div元素的边框？

Question

我有一个由div组成的网格，它们具有固定的宽度和1像素的边框。当两个div相互接触时，边框显然变为2像素。

我该如何让整个网格都只有1像素的边框？

这就是我的意思：

http://jsfiddle.net/Before/4uPtj/

HTML：

<div class="gridcontainer">
  <div class="griditem"></div>
  <!-- 15 more times -->
</div>

CSS：

div.gridcontainer
{
  width: 80px;
  line-height: 0;
}

div.griditem
{
  display: inline-block;            
  border: 1px solid black;
  width: 18px;
  height: 18px;
}

- ONOZ

---

我曾考虑使用“表格”，但最终选择了DIV，因为网格并不适用于表格数据。每个方块应该保持正方形，而行不应因溢出内容而被拉伸。 - ONOZ

有关CSS Grid布局解决方案，请参见此处：https://dev59.com/XVYN5IYBdhLWcg3wJFX8 - Michael Benjamin

Answer 1

尝试这个：

div.griditem
{
    display: inline-block;            
    border: 1px solid black;
    width: 18px;
    height: 18px;
    margin-left: -1px;
    margin-bottom: -1px;
}

- Tobi

Answer 2

你根据你的griditem div来定义你的网格容器，就像这样：

CSS：

   div.gridcontainer
    {
        width: 76px;
        line-height: 0;
        border: solid black;
        border-width: 0 1px 1px 0;
    }

    div.griditem
    {
        display:inline-block;           
        border: solid black;
        border-width: 1px 0 0 1px;
        width: 18px;
        height: 18px;
    }

HTML是指超文本标记语言。

<div class="gridcontainer">
    <div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div>
</div>

这里有实时演示 http://jsfiddle.net/rohitazad/4uPtj/1/

- Rohit Azad Malik

---

+1比被接受的答案更好，因为它不使用负边距，在旧版本的浏览器中会产生不可预测的结果。 - Bazzz

Why line-height: 0? - agentofuser

Answer 3

由于标题的缘故，可能许多人会在这里寻找像我一样的实际css网格布局问题的解决方案。对于他们来说，以下是一种解决方法，使用grid-gap和box-shadow的组合。

.bar {
    max-width: 200px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1px;
}
.foo {
  box-shadow: 0 0 0 1px #000;
}

<div class="bar">
    <div class="foo">1</div>
    <div class="foo">2</div>
    <div class="foo">3</div>
    <div class="foo">4</div>
    <div class="foo">5</div>
    <div class="foo">6</div>
    <div class="foo">7</div>
    <div class="foo">8</div>
    <div class="foo">9</div>
</div>

- Laszlo

---

有趣！我认为在2012年提问时，"display: grid"并不存在。我认为这是一个更现代的解决方案。 - ONOZ

Answer 4

边框合并属性能帮到您吗？

border-collapse 属性设置了表格边框是否合并成一个单一的边框，或者像标准 HTML 一样分离为多个边框。

参见：http://www.w3school.com.cn/cssref/pr_border-collapse.asp

table#myTable
{
   border-collapse:collapse;
}

- hallodom

---

这是最干净的方法，只需要一行CSS代码。我将采纳答案从Tobi改为这个。 - ONOZ

这是错误的，这在网格上行不通（扩展边框以查看它无法工作），请参阅：mdn border-collapse，它仅适用于<table>元素，请参阅w3 border-collapse definition。 - Feirell

border-collapse属性仅适用于基于表的元素，因此不是实际问题的答案，实际问题特定于块级元素。 - Ben Racicot

Answer 5

我使用了CSS Grid布局（display: grid）。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:before, *:after {
  box-sizing: border-box;
}

container {
  width: 100%;
  height: 100%;
}

img {
  max-width: 100%;
  display: block;
}

.grid {
 display: grid;
 background-color: #000;
 border: 1px solid #000;
 grid-gap: 1px;
 justify-self: center; 
 max-width: 282px;
 height: auto;
 margin: 0 auto;
}

.box {
  position: relative;
}

.cell::before {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid #fff;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.box:hover::after {
  content: "+";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: white;
  font-size: 60px;
  font-weight: bold;
}


.box:hover .cell::after {
  content: "";
  display: block;
  position: absolute;
  border: 1px solid red;
  left: -1px;
  right: -1px;
  bottom: -1px;
  top: -1px;
}

.cell {
  position: relative;
  pointer-events: none;
}

.box:hover {
  background-color: red;
}

.box:hover .cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,0,0,0.5);
}

@media only screen and (min-width: 768px) {
 .grid {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  max-width: 563px;
 }
}

@media only screen and (min-width: 1024px) {
 
 .grid {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  max-width: 1124px;
 }
}

<div class="container">
  <div class="grid">
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
  </div>
</div>

- Mary Pieroszkiewicz

Answer 6

这是另一种不需要使用负边距的方法：http://jsfiddle.net/e5crg405/

div.gridcontainer {
    width: 80px;
    line-height: 0;
}

div.griditem {
    display: inline-block;            
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    width: 18px;
    height: 18px;
}

div.griditem:nth-child(4n + 1) {
    border-left: 1px solid black;
}

div.griditem:nth-child(-n + 4) {
    border-top: 1px solid black;
}

- Michael Thompson

---

非常适用于非响应式布局 :) - gonatee

Answer 7

<style>

.gridcontainer .griditem
    {
        border : 2px solid rgba(204,204,204,0.8) !important;
        margin-left:-1px; 
        margin-right:-1px;
        margin-top: -1px;
        margin-bottom: -1px;
    }
</style>

- Chetan Durafe

---

你能告诉我这个和Tobi的答案之间的区别吗？我看不出来。 - ONOZ