Html 如何使用 CSS 折叠一组 <div> 标签的边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10023799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to collapse the borders of a set of <div> tags using CSS?
提问by ONOZ
I have a grid made of DIV's with a fixed width and a border of 1 px. Now where two DIV's touch each other, the border becomes 2px, obviously.
我有一个由 DIV 组成的网格，宽度固定，边框为 1 px。现在，当两个 DIV 相互接触时，边框显然变成了 2px。
How can I just get a 1px border in the whole grid?
我怎样才能在整个网格中获得一个 1px 的边框？
This is what I mean:
这就是我的意思：
http://jsfiddle.net/Before/4uPtj/
http://jsfiddle.net/Before/4uPtj/
HTML:
HTML：
<div class="gridcontainer">
<div class="griditem"></div>
<!-- 15 more times -->
</div>
CSS:
CSS：
div.gridcontainer
{
width: 80px;
line-height: 0;
}
div.griditem
{
display: inline-block;
border: 1px solid black;
width: 18px;
height: 18px;
}
采纳答案by hallodom
Could border collapse property help?
边界崩溃属性有帮助吗？
The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML.
border-collapse 属性设置表格边框是折叠成单个边框还是像标准 HTML 那样分离。
See: http://www.w3schools.com/cssref/pr_border-collapse.asp
见：http: //www.w3schools.com/cssref/pr_border-collapse.asp
table#myTable
{
border-collapse:collapse;
}
回答by Tobi
Try this:
尝试这个：
div.griditem
{
display: inline-block;
border: 1px solid black;
width: 18px;
height: 18px;
margin-left: -1px;
margin-bottom: -1px;
}
回答by Rohit Azad
Hi you define you your gridcontainer with according to your griditem div
嗨，您根据您的 griditem div 定义您的 gridcontainer
as like this
像这样
css
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
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>
?Live demo here http://jsfiddle.net/rohitazad/4uPtj/1/
回答by Laszlo
Because of the title probably many ppl will end up here looking for solution for an actual css grid layoutproblem like myself. For them here's a workaround using a combination of grid-gapand box-shadow
由于标题，可能许多人最终会在这里寻找像我这样的实际 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>回答by Mary Pieroszkiewicz
I have used CCS Grid Layout (display: grid)
我使用过 CCS Grid Layout（显示：网格）
* {
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>回答by Chetan Durafe
<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>
回答by Michael Thompson
Here's another way to do it without negative margins: http://jsfiddle.net/e5crg405/
这是另一种没有负边距的方法：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;
}
