Выравнивание input-ов на форме

Question

Есть учебная страница "сумматор"

Нужно сделать на ней такую форму:

Я понимаю, что скорее всего она сделана с помощью таблицы, но я бы хотел сверстать ее на div`ах. Я столкнулся с проблемой:

Не могу добавить отступы между label и input
кнопки налазят друг на друга.

Хотя каждому input я делаю padding-left : 50px; что по идее должно добавить отступы меду ними. Помогите разобраться, почему этот способ не работает, и как сверстать такую форму?

Вот мой код:

div.field {
  padding-bottom: 20px;
  margin: 0 auto;
  position: relative;
}

div.field label {
  float: left;
  height: 15px;
}

div.field input {
  float: right;
  position: absolute;
  padding-left: 50px;
}

<div>
  <form>
    <div class="field">
      <label align="right" for="firstNumber">Первое число :</label>
      <input type="number" id="firstNumber" align="left">
    </div>

    <div class="field">
      <label align="right" for="secondNumber">Второе число :</label>
      <input type="number" id="secondNumber">
    </div>

    <div class="field">
      <label align="right" for="sum">Сумма :</label>
      <input type="number" id="sum">
    </div>

    <div class="field">
      <input type="button" name="resultButton" value="Расcчитать">
      <input type="button" name="exitButton" value="Закрыть">
    </div>
  </form>
</div>

Answer 1

По вашей картинке. Получите, пожалуйста, и распишитесь.

Этот вариант у вас будет работать во всех браузерах

.form {display: table; padding: 10px; background: #ceffcb;}

.field {display: table-row;}

.field label,.field input, .field>div {display: table-cell; margin-bottom: 5px;}

.field label {text-align: left;}

.field input {margin-left: 25px;}

.field>div:nth-child(1) {text-align: center;}

<form>
  <div class="form">
    <div class="field">
      <label align="right" for="firstNumber">Первое число:</label>
      <input type="number" id="firstNumber" align="left">
    </div>
    <div class="field">
      <label align="right" for="secondNumber">Второе число:</label>
      <input type="number" id="secondNumber">
    </div>
    <div class="field">
      <label align="right" for="sum">Сумма:</label>
      <input type="number" id="sum">
    </div>
    <div class="field button">
      <div><input type="button" name="resultButton" value="Расcчитать"></div>
      <div><input type="button" name="exitButton" value="Закрыть"></div>
    </div>
  </div>
</form>

Answer 2

div.field {
  overflow: hidden;
  padding-bottom: 20px;
  margin: 0 auto;
  position: relative;
}
div.field label {
  float: left;
  width: 150px;
  text-align: left;
}

div.field input{
  float: left;
  padding-left: 50px; 
}

<form>
    <div class="field">
      <label align = "right" for="firstNumber">Первое число :</label>
      <input type="number" id="firstNumber" align="left">
    </div>

    <div class="field">
      <label align = "right" for="secondNumber">Второе число :</label>
      <input type="number" id ="secondNumber">
    </div>

    <div class="field">
      <label align = "right" for="sum">Сумма :</label>
      <input type="number" id="sum">
    </div>

    <div class="field">
      <input type="button" name="resultButton" value="Расcчитать">
      <input type="button" name="exitButton" value="Закрыть">
    </div>
</form>

Answer 3

.field {
  display: flex;
  justify-content: center;
}

.field label, .field input {
  margin: 4px;
}

form {
  width: 360px;
  padding: 8px 20px 8px 8px;
  background: #ceffcb;
}

.field label {
   flex: 1 1 0;
 font-weight: bold;
}

.field input[type="number"] {
  padding: 2px;
  width: 140px;
  box-shadow: 0.5px 0.5px 1px 0.5px rgba(0,0,0,0.6) inset;
}

.field input[type="button"] {
  padding: 3px 10px;
  margin-right: 40px;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.6);
  border: none;
 }

<form>
        <div class="field">
        <label for="firstNumber">Первое число :</label>
        <input type="number" id="firstNumber">
        </div>

        <div class="field">
        <label for="secondNumber">Второе число :</label>
        <input type="number" id ="secondNumber">
        </div>

        <div class="field">
        <label for="sum">Сумма :</label>
        <input type="number" id="sum">
        </div>

        <div class="field">
            <input type="button" name="resultButton" value="Расcчитать">
            <input type="button" name="exitButton" value="Закрыть">
        </div>
</form>

БЛОГ НА HUSL

Выравнивание input-ов на форме

Ответы (3 шт):