выравнивание по вертикали для текстовых полей - PullRequest
Новая
       10

выравнивание по вертикали для текстовых полей

0 голосов
/ 14 ноября 2009

как я могу выровнять (вертикально) некоторые поля ввода текста с помощью CSS? например в следующем: 

<form action='<?= $_SERVER['PHP_SELF']; ?>' method='post'>
            <p><label for='username' class=''>Username:</label>
            <input type='text' name='username' id='username' class='field' value='' tabindex='10' /></p>
            <p><label for='password' class=''>Password:</label>
            <input type='text' name='password' id='password' class='field' value='' tabindex='20' /></p>
            <p><label for='e-mail' class=''>E-mail:</label>
            <input type='text' name='e-mail' id='e-mail' class='field' value='' tabindex='35' /></p>
            <p><input type='submit' name='insert' id='insert' class='button' value='Insert!' tabindex='40' /></p>
    </form>

Могу ли я что-нибудь сделать, кроме использования таблиц?

спасибо Patrick

1 Ответ

1 голос
/ 15 ноября 2009

Я думаю, вы хотите, чтобы текстовые поля были выровнены друг с другом, как показано ниже. Совет: используйте инструменты разработчика Internet Explorer, FireBug Firefox или Dragonfly от Opera, чтобы настроить атрибуты стиля на своей странице. 

<form action='' method='post'>
<div style='clear:both'>
    <label style='float:left;width:5em;display:block' for='username' class=''>Username:</label>
    <input style='float:left;display:block' type='text' name='username' id='username' class='field' value='' tabindex='10' />
<div>
<div style='clear:both'>
    <label style='float:left;width:5em;display:block' for='password' class=''>Password:</label>
    <input style='float:left;display:block' type='text' name='password' id='password' class='field' value='' tabindex='20' />
</div>
<div style='clear:both'>
    <label style='float:left;width:5em;display:block' for='e-mail' class=''>E-mail:</label>
    <input style='float:left;display:block' type='text' name='e-mail' id='e-mail' class='field' value='' tabindex='35' />
</div>
<div style='clear:both'>
    <input style='width:5em;display:block' type='submit' name='insert' id='insert' class='button' value='Insert!' tabindex='40' />
</div>

...