web-dev-qa-db-ja.com

インラインフレックス入力要素がIE11の改行に分割されます

display:inline-flexで配置されたコンテナ内にいくつかのhtml要素が隣り合っています。

これはボタン要素ではうまく機能しますが、input type="text"要素を追加しようとすると、テキストボックスがボタンの下に配置されます（Internet Explorer 11のみ。IE10以下については不明です）。

Firefox、Chrome、さらにはEdge）でも期待どおりに機能します（ボタンと同じ行のテキストボックス）。

これを正しく表示するには、どうすればIE）を取得できますか？

問題を説明するための完全なhtmlおよびcssコードについては、jsFiddleを参照してください。 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>
htmlcssinternet-explorerflexbox
9
Preli

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要素をフレックスコンテナーにするため、次のことを考慮してください。

6
Michael_B

簡単な解決策は、代わりに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>
1
dippas