inline-flex输入元素在IE11中换行 [英] inline-flex input element breaks to new line in IE11

问题描述

在一个放置有 display:inline-flex 的容器中，我有几个html元素彼此相邻.

I have a few html elements next to each other in a container positioned with display:inline-flex.

这对于按钮元素来说效果很好，但是当我尝试添加 input type ="text" 元素时，文本框就放置在按钮下方(仅在Internet Explorer 11中；不确定)大约IE10或更低版本.

This works well for button elements, but as soon as I try to add an input type="text" element, the textbox is placed below the buttons (only in Internet Explorer 11; not sure about IE10 or below).

它在Firefox，Chrome甚至Edge中都能按预期工作(文本框与按钮位于同一行).

It works as expected (textbox in same line as buttons) in Firefox, Chrome and even Edge.

如何让IE正确显示?

有关完整的html和css代码，请参见jsFiddle来说明问题: https://jsfiddle.net/vm2kcwd9/1/

See jsFiddle for full html and css code to illustrate the problem: 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相关错误 .

IE11 is known for having many flex-related bugs.

在这种情况下，一种简单的解决方案是将父级设置为flex容器:

A simple and easy solution in this case would be to make the parent a flex container:

.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 元素放入弹性容器中，因此请考虑以下问题:

Also, since you're making button elements into flex containers, consider this:

• Flexbox无法在< button>上运行.某些浏览器中的元素

这篇关于inline-flex输入元素在IE11中换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！