如何使用CSS折叠一组<div>标签的边框？

Question

我有一个由DIV制成的网格,其宽度固定,边框为1像素.现在两个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

边境倒塌财产有帮助吗？

border-collapse属性设置表边框是折叠为单个边框还是分离为标准HTML.

请参阅:http://www.w3schools.com/cssref/pr_border-collapse.asp

table#myTable
{
   border-collapse:collapse;
}

Answer 4

由于标题可能很多人将最终在这里寻找像我这样的实际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>