2

我拼命想用 Susy 模拟一个网站。我担心我可能只是遗漏了一些明显的东西，但是当我在我的 Susy 网格中嵌套项目时，每列的百分比宽度和边距似乎略微超调，以至于它们加起来超过 100% 并换行到下一行。在以下示例中，#main_headernav 设置为 12 列中的 8 列，其中的每个 li 应填充 8 列中的 2 列。每个 li 都有一个计算样式如下，加起来超过 100% 并导致最后一个项目换行

width: 22.58065%;
float: left;
margin-right: 3.22581%;

这是有问题的例子：

<header id="main_header">
    <img id="main_banner" src="images/test_banner.png" alt="Test">
    <nav id="main_headernav">
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#shop">Shop</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    </nav>          
</header>

和SASS：

$total-columns  : 12;           
$column-width   : 60px;           
$gutter-width   : 20px;  
$grid-padding   : $gutter-width;

//Set border-box sizing - also alters SUSY grid math
//@include border-box-sizing;

// Main Container
#main_container {
    @include container;
}

#main_header {
    @include span-columns(12 omega);

    #main_banner {
        @include span-columns(12 omega,12);
    }

    #main_headernav {
        @include span-columns(8 omega,12);

        li {
            @include span-columns(2,8);
        }
    }
}
4

1 回答 1

2

好的，所以我知道这将是我的问题:)

当然，有必要在每 4 li 子节点上使用 nth-omega mixin，以避免多余的边距并防止包装。

盯着同一个屏幕只花了 2 个小时 :)

于 2012-09-23T20:40:01.543 回答