Homogenisieren Taste Höhen für ansprechende Displays (CSS)

Question

ich zwei Schaltflächen in meiner Vorlage haben wie so:

Ich versuche, sie in der Größe (Höhe und Breite) über kleinere Bildschirme symmetrisch bleiben, um sicherzustellen, . Doch wie Bildschirmbreite abnimmt, dies geschieht:

Wie gewährleisten die Foo Taste ist die gleiche Höhe wie die Bar Foo Bar Taste auch über kleinere Bildschirmgrößen? Suche nach der einfachsten, rein CSS-basierten Lösung.

Meine aktuelle CSS sieht wie folgt aus:

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

---

Mit display:flex in div.tab ergibt dies:

Answer 1

Sie können, dass durch erreichen mit 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>

geben, dass Sie Links als Kind-Elemente verwenden, die Lösung ist 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; 
 
}

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