我的标记结构如下:

<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标记的样式如下所示,所有标记都占用页面空间。(inputdisplay:none)但是除非#outerdiv被显式地指定了高度,否则它将折叠;如果应用1px边框,则它将生成一条水平直线,其他样式的元素将从中显示为“挂起”
为什么会发生这种事?
编辑:所有内部div都向左浮动,标签的样式如下:
.CheckLabels{
    display: inline-block;
    width: 7%;
    height: 45px;
}

据我所知,没有应用其他相关样式。

最佳答案

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 */
}

(真正的问题)
为什么当我浮动父元素的子元素时它会崩溃?
当你“浮动”元素时,它会把它们从传统的流程中去掉,所以你必须使用“清除修正”
您还可以使用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>

07-28 02:27
查看更多