我怎样才能在列之间有一个居中的单一边框？

Question

我正在尝试使用网格（foundation). Please see this pen 为了更加清晰，在列之间有一条线的地方获得效果。

我正在尝试创建这个

但是列之间的间距不允许我通过简单地使用 border-right 来做到这一点。出于响应原因，我宁愿不删除间距。

我最终只使用了一个边框。

实现此目标的最佳方法是什么？

Answer 1

您可以通过首先删除 .columns div 中的填充来实现此目的。这将允许所有的 div 彼此相邻。然后，将边框应用到 .columns 的顶部和右侧。最后，添加一个 :last-child 选择器并移除它的右边框。

结果

SCSS

.columns {
  padding: 0px;
  border-top: 1px solid gray;
  border-right: 1px solid gray;
  .wrap {
    padding: 5px;
    p {
      font-size: 12px;
    }
  }
  &:last-child {
    border-right: 0px;
  }
}

JSFiddle

Answer 2

您可以通过使用伪元素创建边框来伪造它。

.wrap {position:relative;}
.row > .columns:not(:last-child) > .wrap:after {
    content:""; 
    position:absolute; 
    right:-16px; /* ~30px gutters */
    top:0; 
    bottom:0; 
    width:1px; 
    background:blue;
}

http://codepen.io/anon/pen/jAzKEy

如果您的项目都是等高的，那将有效。如果不是，您可能需要在祖先元素上使用伪元素，但想法是相似的。

我怎样才能在列之间有一个居中的单一边框？

How can I have a centered single border between columns?

html

css

grid

sass

zurb-foundation