嵌套列计算错误？答案

【问题标题】：Nested Columns are being miscalculated?嵌套列计算错误？
【发布时间】：2012-09-24 04:40:01
【问题描述】：

我正在拼命尝试用 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);
        }
    }
}

【问题讨论】：

这是我的环境。使用非常基本的布局重新测试并遇到相同的问题。如果使用 span-columns 创建的一系列列加起来为 $total-colums，则最后一列将换行到下一行。 ruby 1.9.3p194 (rvm) Sass 3.2.1 (Media Mark) Compass 0.12.2 (Alnilam) susy (1.0.1)
回答我自己 nth-omega mixin 是删除导致它换行的尾随边距的关键。哇！

标签： compass-sass susy-compass

【解决方案1】：

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

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

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

【讨论】：