css - 苏西天沟尺寸

Question

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

我试图创建一个简单的页面/网格，它有 2 列等宽（50%）。我面临的问题是每列只有 44.4444% 宽，第一列有margin-right11.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显示log-in-section在屏幕中间？

Answer 1

您应该查看 Susy 设置 ( susydocs.oddbird.net/en/latest/settings/ )。该gutters设置是您正在寻找的。另外，gutter-position也值得一看。

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

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