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

Question

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

У меня есть HTML-код следующим образом

<body>
    Hello UserName:<input tyep="text"/><br/>
    Pass:<input type="text"/>
</body>

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

2

html alignment

Источник

user883033 30 янв '12 в 14:13

1 ответ

Решение

Другие вопросы по тегам html alignment

user750510 30 янв '12 в 14:17 2012-01-30 14:17 · Accepted Answer · 2012-01-30 14:17

Посмотрите на этот пример с помощью Chrome Developer Tools или Firebug.

HTML:

<div class="main">
    <div class="field">
        <label for="n">Name</label>
        <input type="text" name="n" />
    </div>
    <div class="field">
        <label for="ln">Surnemt</label>
        <input type="text" name="ln" />
    </div>
    <div class="field">
        <label for="a">Bithplace</label>
        <input type="text" name="a" />
    </div>
</div>

CSS:

body {font-size:14px;}
label {float:left; padding-right:10px;}
.field {clear:both; text-align:right; line-height:25px;}
.main {float:left;}