inline-flex input element breaks to new line in IE11

邮差的信 提交于 2021-02-07 12:18:34

问题


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

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).

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

How can I get IE to display this correctly?

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>

回答1:


IE11 is known for having many flex-related bugs.

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>

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

  • Flexbox not working on <button> element in some browsers



回答2:


Easy solution just add display:flex to parent instead

.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>


来源:https://stackoverflow.com/questions/43429965/inline-flex-input-element-breaks-to-new-line-in-ie11

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!