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

Question

我正在使用 Semantic.gs作为我的网格系统。我正在关注 nested column example在尽可能遵循网格的同时尝试创建我想要的东西。给定来自 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 像素的固定布局。

这是一个示例(Photoshop，不完全根据上面的代码)我试图通过米色父元素上的左右填充实现的图像:

更新:按照 sandeeps 示例，我能够做到这一点，但我没有提到我正在使用 960px 网格。这是我的结果:http://bit.ly/M5fr5N .

Answer 1

您可以为此使用 CSS box-sizing 属性。像这样写:

#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%;
}