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> s и связавшись с кодом, мне интересно, есть ли способ с моим кодом (или вы можете структурировать мой код "лучше"), чтобы добиться того, Мне нужно?

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.

Подробнее о встроенных и блочных элементах .