css - 如何使用非语义 css 框架使 div 跨越页面长度的 100%？

Question

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

解决此问题的最佳方法是什么？将菜单项放在网格内，然后使用减号填充将其放入？

非常感谢。

Answer 1

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

所以我的解决方案是将网格类应用到实际需要网格布局的元素上。在我的示例中，header 没有任何非语义类，因此它可以跨越页面的整个宽度，但 nav 元素是将包含列的网格容器使用 grid-xx 类。根据Unsemantic's Sass Documentation它的默认最大宽度应为 1200 像素；

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 的元素

当然，您必须进一步设计导航样式，使其符合您查找元素的需要。这是开始的样式表(使用 reset-box-model 和 inline-block-list mixins 使用 compass 构建):

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