2

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

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

非常感谢。

4

1 回答 1

2

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

所以我的解决方案是在实际需要网格布局的元素上应用网格类。在我的示例中header，没有任何非语义类，因此它可以跨越页面的整个宽度，但nav元素是网格容器，它将包含带有grid-xx类的列。根据Unsemantic 的 Sass 文档，它的默认最大宽度应该是 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;
}
于 2014-01-08T14:50:28.360 回答