CSS Form Styling #2

Question

Я видел формы, которые могут сделать это без использования <br /> и т.п.

Вот моя форма:

<form id="staff-login" name="staff-login" action="/staff/login/" method="POST">
    <label for="staff-login-email">Email</label>
    <input type="text" id="staff-login-email" name="email" value="" />
    <label for="staff-login-address">Password</label>
    <input type="password" id="staff-login-password" name="password" value="" />
    <input type="submit" id="staff-login-submit" name="submit" value="Login" />
</form>

И пример того, о чем я говорю: http://img694.imageshack.us/img694/4879/43201622.gif

Все примеры, которые я могу добавить в Google <div>Если вы хотите поработать с кодом, мне интересно, есть ли способ с моим кодом (или вы можете структурировать мой код "лучше") для достижения того, что мне нужно?

Answer 1

Используя css, поместите ваш ярлык влево. Кроме того, делайте ваши входные элементы с приличным запасом

label { float: left; width: 200px; }
input { margin-left: 220px; display: block; }
input.staff-login-submit { margin-left: 500px }

Я только что угадал несколько цифр для полей, так что настройте по мере необходимости.

Answer 2

<label> а также <input> являются встроенными элементами. Либо вы используете <br /> (что вполне нормально) или вы указываете их как блочные элементы с помощью CSS.

Вы можете узнать больше о встроенных и блочных элементах.