Question

我拼命想让一个网站被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);
        }
    }
}

Answer 1

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

当然，必须在每个第四个孩子身上使用nth-omega mixin，以避免外在的边缘并防止包裹。

只花了2个小时盯着同一个屏幕：）

嵌套列被误算了？

1 个答案: