Выравнивание Textboxes через HTML

Question

Вот мой код:

Classroom name:    <input type="text" name="txtClassroomName" size="20"><br> 
School name:     <input type="text" name="txtSchoolName" size="20"><br> 
School contact email address: <input type="text" name="txtSchoolEmail" size="20"><br> 
School address:    <input type="text" name="txtSchoolAddress" size="20"><br> 
School telephone number:  <input type="text" name="txtTelephoneNumber" size="20"><br> 

Как вы можете догадаться, этот код отображает текст, а затем имеет несколько текстовых полей после этого текста.

Мой вопрос заключается в следующем: я хочу выровнять все текс-боксы так, чтобы они были выровнены. Я добавил пробелы после текста, но текстовые поля просто появляются сразу после текста, игнорируя пробелы, которые я ввел. Каков наилучший, самый эффективный способ сделать это? Может быть, стол?

благодарит

Answer 1

Вы также можете сделать все текстовые поля появляются один под другим в центре экрана. Он будет выглядеть единообразно.

Answer 2

В HTML непрерывные пробелы принимаются только в одном пространстве. Так что вам нужно HTML специальный символ для пространства, то есть  

Classroom name:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="txtClassroomName" size="20"><br>

Но это грязный путь. Это не стандартный способ сделать это. Кроме того, это не гарантирует, что текстовые поля будут выравниваться так же, пока вы не будете использовать некоторые монопространственные шрифты.

Итак, вы должны рассмотреть либо тег <TABLE>, либо CSS.

Answer 3

Обычно вы должны использовать css для этого. в вашем CSS файл добавить:

label{ 
display:inline-block; 
width:200px; 
margin-right:30px; 
text-align:right; 
} 

input{ 

} 

fieldset{ 
border:none; 
width:500px; 
margin:0px auto; 
} 

Тогда в HTML вы должны установить метки вверх рядом с текстовыми полями:

<fieldset> 
<label for="txtClassroomName">Classroom name:</label><input type="text" name="txtClassroomName" size="20"> 
<label for="txtSchoolName">School name:</label><input type="text" name="txtSchoolName" size="20"> 
<label for="txtSchoolEmail">School contact email address:</label><input type="text" name="txtSchoolEmail" size="20"> 
<label for="txtSchoolEmail">School address:</label><input type="text" name="txtSchoolAddress" size="20"> 
<label for="txtSchoolEmail">School telephone number:</label><input type="text" name="txtTelephoneNumber" size="20"> 
</fieldset> 

в файле CSS, маржинальный-право: 30px; строка сообщает, как далеко друг от друга поставить ярлык и текстовое поле

Установка ширины набора полей создает, по существу, коробку вокруг нее, и вы можете установить ее ширину, если вам нужно сделать больше ярлыков.

Надеюсь, что это поможет.

Мартин

Answer 4

<table> 
<tr><td><label for="txtClassroomName">Classroom name:</label>     
    <td><input type="text" name="txtClassroomName" id="txtClassroomName" size="20"> 
<tr><td><label for="txtSchoolName">School name:</label> 
    <input type="text" name="txtSchoolName" id="txtSchoolName" size="20"><br> 

... 
</table> 

таблица является единственным способом, чтобы сделать столбцы выровненных таким образом, что первый столбец занимает только ширину, необходимую (ширину самой длинной метки). Любой другой подход заставляет вас задуматься о ширине, и результаты неизбежно будут меняться, и код не будет устойчивым (ширина должна быть отрегулирована всякий раз, когда изменяется длина самой длинной метки).