css - 在水平 sass susy 网格之间添加分隔线

Question

我正在尝试弄清楚如何在我的水平布局之间添加垂直分隔线。我有 3 列，我想要中间列左右两侧的分隔符。

通常我会在 CSS 中添加一个 :after 规则来在每个元素之后绘制它，并添加一个 :last-child 来从最后排除它，但问题是Susy 的 span() 函数会填满任何可用的空间，以便在元素之间添加一个 1 像素的分隔符。

这是我的代码:

萨斯:

nav {
    ul {
        list-style-type: none;
        li {
            width: span(1 of 3);
            float: left;
        }
    }
}

HTML:

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</nav>

Answer 1

像 Susy 这样的网格系统的目标是通过排列元素来填充所有可用空间。但是有几个添加边框的选项:

1) 添加 box-sizing: border-box;，可能是将 @include border-box-sizing; 放在你的 li 中声明。查看更多信息 box-sizing .

2) 使用outline ，这不会增加元素的宽度。示例:outline: solid black 1px;