select、input 和label 元素是否有高度属性？

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 标签的样式如下，在页面上都占 space。（input 有 display:none。）但是，除非 #outerdiv 明确指定高度，否则它会折叠；如果应用 1px 边框，它会形成一条直线水平线，其他样式元素从该水平线出现 "hang."

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

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

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

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

Answer 1

Does select, input and label elements have height property?

要声明 'height'，元素必须是显示："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 */
}

（真题）

Why does my parent Element collapse when I float it's children?

当你 'float' 元素时，它会将它们从传统的 flow 中取出 - 所以你必须使用 "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 元素是否有高度属性？

Does select, input and label elements have height property?

html

css

height

select

label