苏西天沟尺寸答案

【问题标题】：Susy Gutter Size苏西天沟尺寸
【发布时间】：2015-04-24 07:24:05
【问题描述】：

我是使用 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);
    }
}

如何减小默认装订线尺寸？以及如何确保log-in-section的border-right显示在屏幕中间？

【问题讨论】：

标签： css susy-compass susy-sass susy

【解决方案1】：

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

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

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

【讨论】：