我在一个容器中有几个 html 元素并排放置在 display:inline-flex
中。
这适用于按钮元素,但只要我尝试添加 input type="text"
元素,文本框就会放置在按钮下方(仅在 Internet Explorer 11 中;不确定关于 IE10 或以下)。
它在 Firefox、Chrome 甚至 Edge 中按预期工作(文本框与按钮在同一行)。
如何让 IE 正确显示它?
请参阅 jsFiddle 以获取完整的 html 和 css 代码来说明问题:https://jsfiddle.net/vm2kcwd9/1/
.container {
height: 2em;
}
.container>* {
height: 100%;
display: inline-flex;
vertical-align: top;
justify-content: center;
align-items: center;
}
<div class="container">
<button>test</button>
<button>test 2</button>
<button>test 3</button>
<input type="text" value="hello" />
</div>
最佳答案
IE11 以拥有许多 flex-related bugs 而闻名.
在这种情况下,一个简单易行的解决方案是让父容器成为一个 flex 容器:
.container {
display: flex; /* new; forces all children into a single row */
height: 2em;
}
.container>* {
height: 100%;
display: inline-flex;
/* vertical-align: top; <--- not necessary anymore */
justify-content: center;
align-items: center;
margin: 5px; /* for demo only */
}
<div class="container">
<button>test</button>
<button>test 2</button>
<button>test 3</button>
<input type="text" value="hello" />
</div>
此外,由于您要将 button
元素制作成 flex 容器,请考虑以下事项:
关于html - inline-flex 输入元素在 IE11 中换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43429965/