css - 基础 5 div 重

Question

我已经开始了一个新元素的工作，并决定给 Foundation 5 一个 bash，看看它是什么样的。在创建带有水平字段的表单时，我在文档中注意到的第一件事是它们使用大量 div 来设置样式。所以我在下面尝试了一个例子(第二个例子我在没有 div 的情况下尝试过):

<!-- Example with extra divs -->
<div class="row">
  <div class="large-2 columns">
  <label>Contact</label>
  </div>
  <div class="large-6 columns left">
    <select></select>
  </div>
</div>

<!-- Example without extra divs -->
<div class="row">
  <label  class="large-2 columns">Contact</label>
  <select class="large-6 columns left"></select>
</div>

它们都实现了相同的效果，但样式略有不同。我想知道是否有人可以解释为什么我会使用第一个(遵循基础 documentation )而不是另一个......使用更少的 html!我猜这与基础的使用方式有关，我只是还没有跟上它的速度。

谢谢

Answer 1

拥有<label>在 <div>会给你很大的造型灵 active 。为 <label> 定义一个类将限制您的样式选项。对于 <div>您可以定义高度、背景颜色、边框、宽度、背景图像、渐变填充、边距、填充等等。而给予<label>一个类名不会让你做那些造型。你可以试试。

基本上，一个 <div>用作其中包含一些内容元素的盒子或容器，这为您提供了强大的样式设计能力和灵 active 。而为内容元素定义类并不能为您提供灵 active 和功能。