Есть учебная страница "сумматор"
Нужно сделать на ней такую форму:
Я понимаю, что скорее всего она сделана с помощью таблицы, но я бы хотел сверстать ее на 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>