Выровнять элементы формы в css

Я новичок в css и имею простую форму входа, которую я пытаюсь правильно выровнять. В основном два столбца с метками и кнопка "Вход" в одном столбце и текстовые поля в другом столбце. Как это сделать в css?

Код html

<body>
  <form action="" method="post">
    <label> Username </label>
    <input type="text"/>

    <label> Password </label>
    <input type="password"/>

    <input type="submit" value="submit"/>
  </form>
</body>

Ответы

Ответ 1

Это один из подходов, который работает:

form {
    width: 80%;
    margin: 0 auto;
}

label, input {
    /* in order to define widths */
    display: inline-block;
}

label {
    width: 30%;
    /* positions the label text beside the input */
    text-align: right;
}

label + input {
    width: 30%;
    /* large margin-right to force the next element to the new-line
       and margin-left to create a gutter between the label and input */
    margin: 0 30% 0 4%;
}

/* only the submit button is matched by this selector,
   but to be sure you could use an id or class for that button */
input + input {
    float: right;
}
​

JS Fiddle demo.

Отрегулируйте размеры и поля, подходящие, например, для вашего прецедента и эстетики.

Ответ 2

За то, что вы просите, я просто поставил их в таблицу.

  <form action="" method="post">
    <table>
        <tr>
            <td><label> Username </label></td>
            <td><input type="text"/></td>
        </tr>
        <tr>
            <td><label> Password </label></td>
            <td> <input type="password"/></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="submit"/></td>
        </tr>
    </table>
  </form>

Вот как это будет выглядеть http://jsfiddle.net/wCSAn/