Как сделать равные отступы для input?

Question

^Вот то, что у меня есть. Мне нужно сделать отступ полей от текста, но так, чтобы все поля были на одном уровне. Так как на скрине ниже. Как это сделать?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>6</title>
</head>
<body>
    <h2>Данные контактного лица</h2>
    <form>
        <fieldset class="columns">
            <div class="column1">
                <label for="obr">Обращение:</label>
                <input type="text" id="obr" name="obr"><br><br>
                <label for="name">Имя и Отчество:</label>
                <input type="text" id="name" name="name"><br><br>
                <label for="surname">Фамилия:</label>
                <input type="text" id="surname" name="surname"><br><br>
                <label for="stepen">Ученая степень:</label>
                <input type="text" id="stepen" name="stepen"><br><br>
                <label for="podr">Подразделение:</label>
                <input type="text" id="podr" name="podr"><br><br>
            </div>
            <div class="column2">
                <label for="num">Номер телефона/добавочный №:</label>
                <input type="text" id="num" name="num">
                <input type="text" id="num2" name="num2"><br><br>
                <label for="secnum">Номер факса/добавочный номер:</label>
                <input type="text" id="secnum" name="secnum">
                <input type="text" id="secnum2" name="secnum2"><br><br>
                <label for="mail">Эл. адрес:</label>
                <input type="text" id="mail" name="mail"><br><br>
                <label for="language">Язык:</label>
                <input type="text" id="language" name="language"><br><br>
                <label for="country">Страна:</label>
                <input type="text" id="country" name="country"><br><br>
            </div>
        </fieldset>
    </form>
</body>
</html>

Answer 1

С помощью flexbox:

div>div {
  display: flex;
  justify-content: space-between;
}

body {
  display: flex;
}

body>div {
  width: 50%;
}

<div>
  <div>
    <label>Input</label>
    <input type="text" placeholder="input">
  </div>
  <div>
    <label>Long Input</label>
    <input type="text" placeholder="input">
  </div>
  <div>
    <label>Ultra long Input</label>
    <input type="text" placeholder="input">
  </div>
</div>
<div>
  <div>
    <label>Input</label>
    <input type="text" placeholder="input">
  </div>
  <div>
    <label>Long Input</label>
    <input type="text" placeholder="input">
  </div>
  <div>
    <label>Ultra long Input</label>
    <input type="text" placeholder="input">
  </div>
</div>

С помощью flexbox (но тут высоту надо указывать):

body {
  display: flex;
}

body>div {
  width: 50%;
  display: flex;
}

label {
  height: 22px;
}

div>* {
  display: block;
}

<div>
  <div>
    <label>Input</label>
    <label>Long input</label>
    <label>Ultra long input</label>
  </div>
  <div>
    <input type="text" placeholder="input">
    <input type="text" placeholder="input">
    <input type="text" placeholder="input">
  </div>
</div>
<div>
  <div>
    <label>Input</label>
    <label>Input</label>
    <label>Long input</label>
    <label>Ultra long input</label>
  </div>
  <div>
    <input type="text" placeholder="input">
    <input type="text" placeholder="input">
    <input type="text" placeholder="input">
    <input type="text" placeholder="input">
  </div>
</div>

С помощью таблицы:

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td><label>Input</label></td>
          <td><input type="text" placeholder="input"></td>
        </tr>
        <tr>
          <td><label>Ultra long Input</label></td>
          <td><input type="text" placeholder="input"></td>
        </tr>
        <tr>
          <td><label>Long Input</label></td>
          <td><input type="text" placeholder="input"></td>
        </tr>
      </table>
    </td>
    <td>
    <table>
      <tr>
        <td><label>Input</label></td>
        <td><input type="text" placeholder="input"></td>
      </tr>
      <tr>
        <td><label>Ultra long Input</label></td>
        <td><input type="text" placeholder="input"></td>
      </tr>
      <tr>
        <td><label>Long Input</label></td>
        <td><input type="text" placeholder="input"></td>
      </tr>
    </table>
    </td>
  </tr>
</table>

БЛОГ НА HUSL

Как сделать равные отступы для input?

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