Question

我是使用Susy的新手。我刚下载并安装到我的应用程序中。我正在使用Susy 2.2

我试图创建一个具有2列宽度相等（50％）的简单页面/网格。我面临的问题是每列只有44.4444％宽，第一列的margin-right为11.111％

HTML：

<div class="container">
    <p>Welcome to my ToDo List, please sign in or register</p>

    <div class="log-in-section>
        <p>User name: <input type="text" name="username"></p>
        <p>Password: <input type="text" name="password"></p>
        <button>Log In</button>
    </div>

    <div class="register-section>
        <button>Register</button>
    </div>
</div>

CSS：

@import '_susy';

.container {
    @include container (12);
    width: 980PX;
    margin: 0 auto;     
    position: relative;
}

.log-in-section {
    @include span(1 of 2);
    border-right: 1px dashed red;

    @include breakpoint(medium) {
        @include span(1 of 1);
    }
}

.register-section {
    @include span(1 at 2 of 2);     

    @include breakpoint(medium) {
        @include span(1 of 1);
    }
}

如何减少默认的装订线尺寸？如何确保border-right的{{1}}显示在屏幕中间？

Answer 1

您应该查看Susy设置（susydocs.oddbird.net/en/latest/settings/）。您正在寻找gutters设置。此外，gutter-position也值得一看。

此外，通常（取决于网格和网格设置），您需要使用last mixin声明最后一个网格列：

.register-section {
    @include last;
    ... /* More styles */

Susy Gutter尺寸

1 个答案: