垂直对齐带有包装文本的按钮，并排
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了垂直对齐带有包装文本的按钮，并排相关的知识，希望对你有一定的参考价值。
我想并排显示多个按钮，这不是问题。 但是我有一个或多个带有包装文本的按钮，因为按钮太小（这应该是）。
如果包裹一个按钮的文本，它们并不能正确显示。 包装文本的按钮低于另一个按钮。 是什么导致这种情况，我该如何预防呢？
.container {
width: 200px;
border: 1px solid black;
}
button {
width: 50%;
height: 40px;
}<div class="container">
<button>TEST</button><button>TEST WRAPPED TEXT</button>
</div>答案
按钮是inline元素，默认情况下垂直对齐baseline ...
...所以使用vertical-align:top来button ...
堆栈代码段
.container {
width: 200px;
border: 1px solid black;
}
button {
width: 50%;
height: 40px;
vertical-align: top;
}<div class="container">
<button>TEST</button><button>TEST WRAP TEXT</button>
</div>另一答案
display:flex上的.container可以解决这个问题。
因为你需要按钮是它的容器的50%，这是最好的方法。
.container {
width: 300px;
display: flex;
border: 1px solid black;
}
button {
flex: 1;
height: 40px;
}<div class="container">
<button>TEST</button><button>TEST WRAPPED TEXT</button>
</div>以上是关于垂直对齐带有包装文本的按钮，并排的主要内容，如果未能解决你的问题，请参考以下文章