選擇，輸入和標籤元素有高度屬性嗎？

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邊框，則會形成一條直線，其他樣式元素顯示爲「掛起」。

這是爲什麼/這裏發生了什麼？

編輯：所有內部的div的左浮動，和標籤樣式這樣：據我可以告訴

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

沒有其他相關樣式應用於。

Answer 1

請問select，input和label元素有height屬性嗎？

要聲明 '高度'，該元件具有爲任一顯示： 「塊」 或 「內聯塊」 -

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

（真正的問題）

爲什麼當我浮動它的孩子時，我的父元素崩潰了嗎？

當你「浮動」元素，他們花了傳統流的 - 所以你必須使用一個「明確的定位。」 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>