0

Susyを使用するのは初めてです。アプリケーションにダウンロードしてインストールしました。Susy 2.2を使用しています

同じ幅 (50%) の 2 つの列を持つ単純なページ/グリッドを作成しようとしています。私が直面している問題は、各列の幅が 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にはどうすればよいですか?log-in-section

4

1 に答える 1

1

Susy の設定 ( susydocs.oddbird.net/en/latest/settings/ ) を確認してください。設定はguttersあなたが探しているものです。また、gutter-position一見の価値もあります。

lastさらに、通常 (グリッドとグリッドの設定に応じて)、ミックスインを使用して最後のグリッド列を宣言する必要があります。

.register-section {
    @include last;
    ... /* More styles */
于 2015-04-24T08:33:54.363 に答える