具有1px边框的CSS网格

我有一个由固定宽度和1px边框构成的网格。现在，当两个DIV接触彼此时，边界显然变为2px。具有1px边框的CSS网格

我怎样才能在整个网格中获得1px边框？

这就是我的意思是：

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

来源

2012-04-05 ONOZ

我没有考虑使用'table'，但我选择的DIV因为电网真的不是表格数据。每个广场都应该保持正方形，而且行不应该被满溢的内容拉长。 – ONOZ 2012-04-05 08:19:56

能边境崩溃性质的帮助？

border-collapse属性设置表格边框是否折叠为单个边框或与标准HTML分离。

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

table#myTable 
{ 
    border-collapse:collapse; 
}

来源

2014-05-07 10:57:55 hallodom

这是最干净的方法，并在一行CSS中。我将Tobi的接受答案改为这一个。 – ONOZ 2014-05-20 10:12:57

试试这个：

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

来源

2012-04-05 06:44:46 Tobi

+1，因为这个工作的最小麻烦 - 没有必要像另一个像素完美。 – Izkata 2013-02-27 02:01:37

这只是解决了我的问题。当我发现这一点时，我遇到了完全相同的问题。完美解决了我的问题。非常感谢你。 – Margate 2013-12-29 17:08:29

工作和整洁的解决方案，+1。 – 2013-12-30 15:21:17

嗨，你定义你根据你的GridItem DIV您gridcontainer

像这样

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/

来源

2012-04-05 06:57:23

+1比接受的答案更好，因为它不使用在较旧的浏览器中具有不可预知结果的负边距。 – Bazzz 2012-04-05 07:16:02

+1这真的是一个很好的。 – sandeep 2012-04-05 09:32:21

美丽的解决方案！ – 2016-10-03 05:41:50

<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>

来源

2014-08-19 14:29:23

你能告诉我这个和Tobi的答案有什么不同吗？我看不到它。 – ONOZ 2014-08-19 15:11:20

这里的另一种方式做到这一点不切缘阴性：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; 
}

来源

2015-10-16 18:35:59

对非响应式布局非常有用:) – gonatee 2016-09-25 09:57:34

我已经使用CCS网格布局（显示：网格）

* { 
 
    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 { 
 
\t display: grid; 
 
\t background-color: #000; 
 
\t border: 1px solid #000; 
 
\t grid-gap: 1px; 
 
\t justify-self: center; 
 
\t max-width: 282px; 
 
\t height: auto; 
 
\t 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) { 
 
\t .grid { 
 
\t \t grid-template-columns: repeat(2, 1fr); 
 
\t \t grid-template-rows: repeat(4, 1fr); 
 
\t \t max-width: 563px; 
 
\t } 
 
} 
 

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

<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>

来源

2017-06-26 08:48:56

具有1px边框的CSS网格

回答

相关问题