CSS - Wie werden Tasten unterschiedlicher Höhe richtig ausgerichtet?

Question

Ich baue einen JavaScript-Rechner, und ich habe Probleme, alle Tasten richtig ausgerichtet zu bekommen. Ich habe meinen Gleichheits-Button größer als den Rest gemacht, und dadurch wird die Ausrichtung der unteren beiden Reihen weggeworfen. Ich habe versucht mit vertical-align, float und display: inline aber kann nicht scheinen, die richtige Kombination zu bekommen, damit es funktioniert. Kann mich hier jemand in die richtige Richtung lenken?

JSFiddle

Answer 1

Remove Position absolute aus dem Gleichheits Taste, und stellen Sie die letzte Zeile absolut zu positionieren: https://jsfiddle.net/jdqem3hh/2/

* { 
    margin: 10px auto; 
    font-size: 25px; 
} 
body { 
    background-color: #202020; 
    font-family: 'Days One', sans-serif; 
} 
#output { 
    background: #94AFB5; 
    width: 400px; 
    height: 70px; 
    font-size: 50px; 
    border-radius: 10px; 
    padding-right: 5px; 
} 
.calculator { 
    position: relative; 
    text-align: center; 
    width: 410px; 
    height: 520px; 
    padding: 2px; 
    background: #5591C3; 
    border-radius: 15px; 
    font-weight: bold; 
    margin-top: 5%; 
    margin-left: auto; 
    margin-right: auto; 
} 
button { 
    margin: 2px; 
    width: 85px; 
    height: 55px; 
    background-color: #084D87; 
    color: #D17900; 
    border-radius: 10px; 
    text-align: center; 
    cursor: pointer; 
    outline: none; 
    border: none; 
    box-shadow: 0 5px #053C6A; 
    padding: 5px; 
    vertical-align: top; 
} 
button:active { 
    background-color: #084D87; 
    box-shadow: 0 5px #053C6A; 
    transform: translateY(4px); 
} 
#zero { 
    width: 181px; 
} 
#ac, #ce { 
    background-color: #EC0000; 
    box-shadow: 0 5px #BC0000; 
} 
.last-row { 
    position: absolute; 
    bottom: 16px; 
    left: 31px; 
} 
#equals { 
    height: 125px; 
    font-size: 45px; 
} 

Answer 2

Sie müssen die kleineren Tasten innen transparent float div mit der gleichen Höhe wie die großen Tasten in Einklang zu bringen.