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

Question

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

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

即使屏幕尺寸较小，如何确保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>

在display:flex中使用div.tab会产生以下结果：

Answer 1

您可以使用MainActivity implements MainFragment.OnListItemClickListener：

来实现这一目标

display: flex

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

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;
}

假设您使用链接作为子元素，解决方案是<div class="tab"> <button>Foo</button> <button style="float:right;border-bottom: 2px solid #ffa726;color:#fb8c00;background-color:#fff3e0;"><b>Bar Foo Bar</b></button> </div>：

display-table

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

div.tab a {
  display: table-cell;
  width: 1%;
  height: 100%;
}

div.tab a button {
  padding: 0.5em;
  border: none;
  vertical-align: middle;
  width: 98%;
  background-color: #eeeeee;
  display: inline-block;
  height: 100%;
}

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