内联-在IE11中将输入元素换行为新行

Question

在一个用display:inline-flex定位的容器中，我有几个相邻的html元素。

这对于按钮元素很有效，但是只要我尝试添加一个input type="text"元素，文本框就被放在按钮下面(仅在Internet Explorer11中；不确定是否使用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>

​

Answer 1

IE11以拥有许多而闻名。

在这种情况下，一种简单的解决方案是将父容器设置为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容器，因此请考虑以下内容：

• Flexbox not working on element in some browsers

Answer 2

简单的解决方案只需将display:flex添加到父级

​

.container {
  display: flex;
  justify-content: center;
  /* align-items: center; you might not need this */
  height: 2em;
}

.container>* {
  height: 100%;
  margin: 10px;
}

<div class="container">
  <button>test</button>
  <button>test 2</button>
  <button>test 3</button>
  <input type="text" value="hello" />
</div>

​