無法在3列固定流體寬度佈局中打開選擇

Question

我創建了包含選擇（固定左邊），輸入（流體中心）和按鈕（右邊固定）的三列固定流體寬度佈局。爲什麼select-col中的選擇框不可點擊/展開/打開？我正在觀察IE，Firefox和Chrome中的這種行爲。

我該如何解決這個問題並達到預期的佈局結果？

實施例：http://jsfiddle.net/cegyz1cd/2/

<div class="select-col"> 
    <select> 
     <option value="0">Option 0</option> 
     <option value="1">Option 1</option> 
    </select> 
</div> 
<div class="input-btn-col"> 
    <div class="input-col"> 
     <input type="text" /> 
    </div> 
    <div class="btn-col"> 
     <button type="button">Go</button> 
    </div> 
</div> 

---

* { 
    box-sizing: border-box; 
} 
select, input { 
    width: 100%; 
} 
.select-col { 
    float: left; 
    width: 150px; 
    margin-right: -150px; 
} 
.input-btn-col { 
    width: 100%; 
    padding-left: 150px; 
    float: left; 
} 
.input-col { 
    width: 100%; 
    padding-right: 110px; 
    float: left; 
} 
.btn-col { 
    float: left; 
    width: 110px; 
    margin-bottom: 0; 
    margin-left: -110px; 
} 

Answer 1

第二divinput-btn-col與select元件（select-col），因爲它具有100% width並且被浮動left及其嵌套div具有margin覆蓋div在左邊。

---

它只是需要CSS變化：http://jsfiddle.net/cegyz1cd/3/

* { 
    box-sizing: border-box; 
} 
select, input { 
    width: 100%; 
} 
.select-col { 
    float: left; 
    width: 150px; 
    margin-right: -150px; 
    position: relative; 
    z-index: 999; 
} 
.input-btn-col { 
    width: 100%; 
    padding-left: 150px; 
    float: left; 
} 
.input-col { 
    width: 100%; 
    padding-right: 110px; 
    float: left; 
} 
.btn-col { 
    float: left; 
    width: 110px; 
    margin-bottom: 0; 
    margin-left: -110px; 
}