どのようにして列の間に中央揃えの境界線を設定できますか？

Question

私はグリッド（foundation）を使って列間に1本の線がある場所の効果を得ようとしています。明確にするために、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

することができます疑似elemenとの境界を作成することによって、それを偽ts。あなたの項目はすべて同じ高さである場合に動作します

.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

。そうでなければ、祖先要素に対して擬似要素を使用する必要がありますが、その考え方は似ています。