Question

这是我的问题。我在各种项目中使用了经典的css网格（实际上我使用了1140px），现在我想为自己创建一个。前段时间我还和一个告诉我并不总是使用网格的人说话，否则我会用div来膨胀页面。现在，我现在不明白的是，我怎么能不使用任何网格使用div来膨胀页面。只是一个简短的例子。这就是菜单在不使用网格的情况下的样子。

<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>

这就是使用网格系统菜单的样子：

<div class="column4 prefix4">
<nav>
<div class="column1"><li></li></div>
<div class="column1"><li></li></div>
<div class="column1"><li></li></div>
<div class="column1"><li></li></div>
</nav>
</div>

选项是不使用网格，但在没有网格的情况下，我似乎很难定位元素。肯定有一些我不在考虑的事情。

Answer 1

演示：http://jsbin.com/buwexe/edit?html,css,output

如果您不想使用divs来混淆UI，那么您将不得不使用不可重用的描述性类。

网格的目的是在不附加到页面上的特定元素的情况下可重复使用。例如，下面的代码段是描述性的，不会弄乱UI，但请记住，它不能在导航上下文之外重复使用。

<nav class="navigation">
 <ul class="nav">
  <li class="nav-item">Home</li>
  <li class="nav-item">Contact</li>
  <li class="nav-item">Team</li>
  <li class="nav-item">Work</li>
 </ul>
</nav>

和相应的CSS：

* {
  box-sizing: border-box;
}

.navigation {
  width: 100%;
}

.nav {
  padding: 0;
  margin: 0;  
  list-style: none;
  width: 100%;
  border: 1px solid #bdc3c7;
}

.nav:after {
  display: table;
  clear: both;
  content: "";
}

.nav .nav-item {
  float: left;
  color: #3498db;
  background: #ecf0f1;
  padding: 5px 10px;
  text-align: center;
  border-left: 1px solid #bdc3c7;
  width: 25%;
}

.nav .nav-item:first-of-type {
  border-left: none;
}

请注意如何在导航项中完成大小调整，这不可重复使用，网格系统会使这更混乱但更可重用和可维护，这在2 + 团队中至关重要

如何避免使用div的膨胀页面？

1 个答案: