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

Question

我试图弄清楚如何在我的水平布局之间添加垂直分隔线。我有 3 列，我想在中间列的右侧和左侧设置分隔线。

通常，我会:after在 CSS 中添加一条规则以在每个元素之后绘制它，并: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>

score 1 · Accepted Answer

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

1）添加box-sizing: border-box;，可能通过放入@include border-box-sizing;您的li声明。查看更多关于box-sizing 的信息。

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

1 回答 1