如何使用非manticcss框架使div跨度达到页面长度的100%

Question

我需要编辑框架吗？还是应该在容器div之外创建这个div？我想跨越100%窗口的div是一个菜单div，所以我希望它跨越100%窗口，但我希望它里面的菜单项符合网格系统。

对此最好的方法是什么？将菜单项放入网格中，然后使用减号填充将其放入？

非常感谢。

Answer 1

我知道这个问题大约有六个月大了，但我想我会在这里发布我的解决方案，以防对某人有用。

因此，我的解决方案是将网格类应用于实际需要网格布局的元素。在我的示例中，header没有任何非尾数类，因此它可以跨越页面的整个宽度，但nav元素是网格容器，它将包含具有grid-xx类的列。根据Unsemantic的Sass文档，它的默认最大宽度应该是1200px；

HTML

<header>                               
  <nav class="grid-container">
    <ul class="grid-33">
      <li><h2>My Site</h2></li>
    </ul>
    <ul class="grid-66">
      <li><a href="#">Home</a></li>
      <li><a href="#">Settings</a></li>
    </ul>
  </nav>
</header>

CSS

例如：

• 重置html、body和header的方框模型，使导航占据页面的整个宽度
• 为header放置一个浅灰色背景色，这样您可以看到它占据了页面的整个宽度
• 为nav放置一个蓝色边框，以便可以看到类为grid-container的元素
• 水平对齐ul并显示红色边框，这样您就可以看到grid-xx类的元素

当然，您必须进一步设计导航样式，使其适合您的项目。以下是要开始的样式表（使用compass使用重置框模型和内联块列表mixin构建）：

html, body, header {                                                                                                                                                                                                                     
  margin: 0;
  padding: 0;
  border: 0;
}
nav {
  border: thin solid blue;
}
ul {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  *zoom: 1;
  border: thin solid red;
}
ul li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  white-space: nowrap;
}
header {
  background-color: lightgray;
}