我在一个带有display:inline-flex的容器中彼此相邻的几个html元素.
这适用于按钮元素,但只要我尝试添加输入类型=“文本”元素,文本框就会放在按钮下方(仅限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>
解决方法
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>
此外,由于您将按钮元素制作成Flex容器,请考虑以下因素:
原文地址:https://www.jb51.cc/html/242530.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。