Кнопки в разных рядах имеют разные размеры ⇐ Html

[Anonymous]

Я разрабатываю (создавая копию калькулятора iPhone) базового калькулятора с использованием HTML, CSS и JavaScript. Я выложил кнопки в разных рядах. Но проблема в том, что кнопки в разных рядах имеют разные размеры, как вы можете видеть на скриншоте. Кнопки верхних и нижних рядов идеально круглые, в то время как кнопки в средних рядах немного раздавлены с стороны. Из Devtool я вижу, что кнопки верхних рядов ровно 64x64, как я кодировал, но кнопки среднего ряда 59,86x64! Я не могу понять, как решить это. Я пытался изменить размеры единиц как контейнера, так и кнопок, но безрезультатно. Для вашей ссылки я прикрепил код HTML и CSS. />

Код: Выделить всё

body {
font-family: "Roboto", sans-serif;
}

header {
background-color: #4caf50;
color: white;
padding: 10px 0;
text-align: center;
}
main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ededea;
}

.calculator {
background-color: rgb(41, 43, 46);
display: flex;
flex-direction: column;
align-items: center;
border-radius: 0.6rem;
padding-bottom: 0.5rem;
border: #fff 0.1rem solid;
position: relative;
box-shadow: 5px -5px 7px -3px #8e8e8e;
}

.display {
border-radius: 0.3rem;
margin-top: 0.3rem;
height: 5rem;
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 4rem;
color: #f3f3f3;
}

.calc-btn {
margin-top: 1rem;
height: 72%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}

.calc-items-width {
width: 97%;
}

.row {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding: 0.3rem 0 0.3rem;
}

button {
width: 64px;
height: 64px;
border-radius: 50%;
background-color: #696868;
font-size: 1.5rem;
font-weight: 700;
color: #f3f3f3;
text-align: center;
}

button:active {
background-color: #e4e5e4;
}

.light-font {
font-weight: 100;
}

.operator-size {
font-size: 1.8rem;
}

.light-btn-color {
background-color: #9e9e9e;
}

.orange-btn {
background-color: #ff9800;
}< /code>


Simple Calculator



0


AC
÷

7
8
9
x

4
5
6
-

1
2
3
+

0
=

Подробнее здесь: https://stackoverflow.com/questions/796 ... rent-sizes