均匀化响应显示（CSS）的按钮高度

我的模板中有两个按钮，如下所示：

我试图确保它们在较小的屏幕上保持大小（高度和宽度）对称。然而，随着屏幕宽度的减小，这种情况会发生：

如何确保

Foo

按钮的高度与

Bar Foo Bar

按钮的高度相同，即使屏幕尺寸较小？寻找最简单、纯粹基于CSS的解决方案

我当前的CSS如下所示：

<style>


div.tab {
    overflow: hidden;
    background-color: white;
    text-align:center;
    display:inline-block;
    width:95%; 
    max-width:400px; 
    padding:5px;
}

div.tab button {
    background-color: #eeeeee;
    float: left;
    padding: 0.5em;
    border: none;
    width:49.5%;

}

div.tab button:hover{
    border-bottom: 2px solid #ffa726;
    color:#fb8c00;
}

</style>

<div class="tab">
<a href="example.com"><button>Foo</button></a>
<a href="example.com"><button style="float:right;border-bottom: 2px solid #ffa726;color:#fb8c00;background-color:#fff3e0;"><b>Bar Foo Bar</b></button></a>
</div>

分区选项卡{
溢出：隐藏；
背景色：白色；
文本对齐：居中；
显示：内联块；
宽度：95%；
最大宽度：400px；
填充物：5px；
}
div.tab按钮{
背景色：#eeeeee；
浮动：左；
填充：0.5em；
边界：无；
宽度：49.5%；
}
div.tab按钮：悬停{
边框底部：2个实心#ffa726；
颜色：#fb8c00；
}

---

在

div.tab

中使用

display:flex

，结果如下：

---

您可以通过使用

display:flex

：

div.tab{
溢出：隐藏；
背景色：白色；
文本对齐：居中；
显示：内联块；
宽度：95%；
最大宽度：400px；
填充物：5px；
显示：flex；/*此处*/
}
div.tab按钮{
背景色：#eeeeee；
浮动：左；
填充：0.5em；
边界：无；
宽度：49.5%；
}
div.tab按钮：悬停{
边框底部：2个实心#ffa726；
颜色：#fb8c00；
}

福
巴福吧

奇怪。您使用的是哪种浏览器？这是一把小提琴，更容易响应，也更有趣。我的按钮包装在

标签中。从我移除它们的那一刻起，它就可以正常工作（按照您的意愿），否则就不行了。此外，设置

display:flex

似乎已经消除了按钮之间的喘息空间。我认为

display:flex

只有在按钮是元素

.tab

的直接子元素时才会起作用。您可能需要试用

display:table

或

display:grid

。我将试着举出一些例子。关于空间，可以通过调整按钮的宽度将其取回。尝试了

display:table

和

display:grid

。似乎

display:flex

最接近于按照我的要求工作，但正如你所说的，它需要按钮是直接的子项，因为

标记不能是直接的子项。@HassanBaig请检查这个->>。我使用了

display:table

示例，也尝试了

display:grid

，但问题与

display:flex

相同；