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

Question

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

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

非常感谢。

Answer 1

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

所以我的解决方案是仅将网格类应用于实际需要网格布局的元素。在我的示例中，header 没有任何非语义类，因此它可以跨越页面的整个宽度，但 nav 元素是包含列的网格容器与grid-xx类。根据Unsemantic's Sass Documentation它的默认最大宽度应为 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 的框模型，以便导航占据页面的整个宽度
• 为标题设置浅灰色背景颜色，以便您可以看到它占据了页面的整个宽度
• 为 nav 放置蓝色边框，以便您可以看到带有 grid-container 类的元素
• 水平对齐 ul 并显示红色边框，以便您可以看到类 grid-xx 的元素

当然，您必须进一步设置导航的样式，以使其能够查找您的元素。这是开始的样式表(使用重置盒模型和内联 block 列表混合使用指南针构建):

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