Question

我的标记结构如下所示：

<div id="outerdiv">
    <div>
        Some text <select>...options...</select>
    </div>
    <div>
        <input><label><input><label>...
    </div>
    <div>
        Some text <select>...otions...</select>
    </div>
</div>

文字为粗体，select标签具有默认样式，label标签的样式如下所示，并占用了页面上的所有空间。（input有display:none。）但是，除非明确指定#outerdiv高度，否则它会崩溃;如果应用了1px边框，则会形成一条直线水平线，其他样式元素将从中显示为“＃34;挂起。”＃34;

为什么这/这里发生了什么？

编辑：所有内部div都向左浮动，标签的样式如下：

.CheckLabels{
    display: inline-block;
    width: 7%;
    height: 45px;
}

据我所知，没有其他相关风格适用。

Answer 1

select，input和label元素是否具有height属性？

要声明'height'，元素必须是display：“block”或“inline-block” -

.thing {
  display: block; /* or */
  display: inline-block;
  height: 20px; /* 95% of the time.. you should NOT declare a height */
  /* but this will work */
}

（真正的问题）

为什么我的父元素会在我浮动它的孩子时崩溃？

当你'浮动'元素时，它会将它们从传统的流中删除 - 因此你必须使用“clear-fix”。 What is a clearfix?

您还可以使用overflow: hidden;或边框将其重新排序。溢出隐藏曾经有一些副作用......但我认为这些日子并不令人担忧......

.parent {
  background: lightgreen;
  overflow: hidden; /* but really - you should use a clearfix */
}

.parent div {
  width: 100%;
  float: left;
}

<section class="parent">
  <div>
    Some text
    <select>
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
  </div>

  <div>
    <label for="thing-1">Input label</label>
    <input type="text" id="thing-1">
  </div>

  <div>
    Some text
    <select>
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
  </div>
</section>

select，input和label元素是否具有height属性？

1 个答案: