html - 无法在 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

第二个 div input-btn-col 用 select 元素覆盖 div (select-col) 因为它有 100% 宽度 并且在左边 float 并且它嵌套的 div 有一个 margin 在左边。

---

它只需要更改 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;
}