我创建了一个三列固定宽度的布局,其中包含一个选择(固定在左侧)、输入(固定在中间)和按钮(固定在右侧)。为什么 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;
}
最佳答案
第二个 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;
}
关于html - 无法在 3 列固定流体宽度布局中打开选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27351031/