некоторые проблемы в кодах html и css

Question

Я пытаюсь закодировать интерфейс калькулятора. У меня две проблемы: 1) почему размеры этих кнопок (., +) Не точны; 2) почему этот код:

.button {
  background-color: rgb(81, 122, 121);
  border: 7px solid rgb(213, 236, 213);
  color: white;
  padding: 10px 45px;
  font-size: 25px;
}

.button20 {
  background-color: rgb(36, 117, 117);
  padding: 15px 32px;
  text-align: right;
  width: 285px;
  height: 45px;
}

.button19 {
  padding: 10px 20px;
}

.style {
  margin: 0 auto;
}

<div class="button button20">0</div>
<div>
  <button class="button">7</button>
  <button class="button">8</button>
  <button class="button">9</button>

</div>

<div>
  <button class="button">4</button>
  <button class="button">5</button>
  <button class="button">6</button>

</div>
<div>
  <button class="button">1</button>
  <button class="button">2</button>
  <button class="button">3</button>

</div>
<div>
  <button class="button">0</button>
  <button class="button button12">.</button>
  <button class="button">±</button>

</div>
<div>
  <button class="button button14">×</button>
  <button class="button">+</button>
  <button class="button button16">-</button>

</div>
<div>
  <button class="button">÷</button>
  <button class="button">=</button>
  <button class=" button button19">Clear</button>

</div>

</div>

Answer 1

Попробуйте обернуть все это в элемент с display: flex; и удалить все остальные элементы.

Затем добавьте дополнительный стиль для .button20, чтобы он занимал весь ряд.

.calculator {
  width: 285px;
  display: flex;
  flex-wrap: wrap;
}

button {
  background-color: rgb(81, 122, 121);
  border: 7px solid rgb(213, 236, 213);
  color: white;
  padding: 10px;
  font-size: 25px;
  flex: 1 0 33.3%;
}

.button20 {
  background-color: rgb(36, 117, 117);
  text-align: right;
  flex: 0 0 100%;
}

<div class="calculator">
  <button class="button20">0</button>

  <button>7</button>
  <button>8</button>
  <button>9</button>

  <button>4</button>
  <button>5</button>
  <button>6</button>

  <button>1</button>
  <button>2</button>
  <button>3</button>

  <button>0</button>
  <button>.</button>
  <button>±</button>

  <button>×</button>
  <button>+</button>
  <button>-</button>

  <button>÷</button>
  <button>=</button>
  <button>Clear</button>

</div>

Answer 2

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Calculater interface</title>

.button, .result {background-color: rgb (81, 122, 121); граница: 6px solid rgb (213, 236, 213); белый цвет; размер шрифта: 25 пикселей; обивка: 5px; }

    .result {
        background-color: rgb(36, 117, 117);
        width: 286px;
    }

    .button {
        width: 100px;
        height: 50px;
    }
</style>



<div class="wrapper">

    <div class="result">0</div>

    <div>

        <button class="button">7</button>

        <button class="button">8</button>

        <button class="button">9</button>

    </div>



    <div>

        <button class="button">4</button>

        <button class="button">5</button>

        <button class="button">6</button>

    </div>

    <div>

        <button class="button">1</button>

        <button class="button">2</button>

        <button class="button">3</button>

    </div>

    <div>

        <button class="button">0</button>

        <button class="button">.</button>

        <button class="button">±</button>

    </div>

    <div>

        <button class="button">×</button>

        <button class="button">+</button>

        <button class="button">-</button>

    </div>

    <div>

        <button class="button">÷</button>

        <button class="button">=</button>

        <button class=" button">Clear</button>

    </div>

</div>

</div>

Answer 3

Вы можете исправить это, изменив CSS. Я отредактировал твой код. Это работа, как вы ожидаете.

.button {
  background-color: rgb(81, 122, 121);
  border: 7px solid rgb(213, 236, 213);
  color: white;
  padding: 10px 45px;
  font-size: 25px;
width: 117px !important;
}

.button20 {
  background-color: rgb(36, 117, 117);
  padding: 15px 32px;
  text-align: right;
  width: 281px !important;
  height: 45px;
}

.button19 {
  padding: 10px 20px;
}

.style {
  margin: 0 auto;
}

<div class="button button20">0</div>
<div>
  <button class="button">7</button>
  <button class="button">8</button>
  <button class="button">9</button>

</div>

<div>
  <button class="button">4</button>
  <button class="button">5</button>
  <button class="button">6</button>

</div>
<div>
  <button class="button">1</button>
  <button class="button">2</button>
  <button class="button">3</button>

</div>
<div>
  <button class="button">0</button>
  <button class="button button12">.</button>
  <button class="button">±</button>

</div>
<div>
  <button class="button button14">×</button>
  <button class="button">+</button>
  <button class="button button16">-</button>

</div>
<div>
  <button class="button">÷</button>
  <button class="button">=</button>
  <button class=" button button19">Clear</button>

</div>

</div>