html - 如何折叠一组边框使用 CSS 的标签？

Question

我有一个由 DIV 组成的网格，宽度固定，边框为 1 px。现在两个 DIV 相互接触，边框显然变成了 2px。

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

这就是我的意思：

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

Answer 1

试试这个：

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

Answer 2

嗨，您根据您的 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/

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>

Answer 4

边界崩溃属性可以帮助吗？

border-collapse 属性设置表格边框是折叠成单个边框还是像标准 HTML 中那样分离。

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

table#myTable
{
   border-collapse:collapse;
}

Answer 5

我用过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>

Answer 6

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

Answer 7

这是另一种没有负边距的方法：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;
}