如何在嵌套列的父列上填充CSS网格(Semantic.gs)

Question

我使用Semantic.gs作为我的网格系统。我跟踪嵌套列示例，在尽可能多地跟踪网格的同时，尝试并创建我想要的东西。给出了来自Semantic.gs的嵌套列示例代码：

HTML

<article>
   <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
   </ul>
</article>

较少

article {
   .column(9);

   ul {
      .row(9);

      li {
         .column(6,9);
      }
   }
}

我的问题是，向嵌套列的父列添加填充(理想情况下是与排水沟相同的宽度)，同时尽可能坚持网格系统(semantic.gs)的最佳方法是什么？注意到，我使用的是960 am 的固定布局。

下面是一个示例(Photoshop，不完全按照上面的代码)，我试图用米色父元素上的左右填充来实现的图像：

​

​

UPDATE:按照桑德斯的例子，我能够做到这一点，但我没有提到我使用的是960 am网格。这是我的结果：http://bit.ly/M5fr5N。

Answer 1

为此，可以使用CSS 框大小属性。像这样写：

#maincolumn {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
    background: none repeat scroll 0 0 red;
    display: inline;
    float: left;
    margin: 0 1.04167%;
    width: 72.9167%;
}