Wyrównywanie pola tekstowe za pośrednictwem HTML

Question

Oto mój kod:

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> 

Jak można się domyślić, ten kod wyświetla jakiś tekst, a następnie ma kilka otaczaniem po tym tekście.

Moje pytanie brzmi: chcę dopasować wszystkie texboksy do ich wyrównania. Po tekście dodałem spacje, ale pola tekstowe pojawiają się bezpośrednio po tekście, ignorując spacje, które wprowadziłem. Jaki jest najlepszy i najskuteczniejszy sposób na zrobienie tego? Może stolik?

dzięki

Answer 1

Można także wszystkie pola tekstowe wyświetlane jedna pod drugą na środku ekranu. Będzie wyglądać jednolicie.

Answer 2

W HTML, ciągłe spacje są traktowane jako pojedyncze spacje. Więc trzeba HTML znak specjalny do przestrzeni, która jest  

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

Ale to jest brudny sposób. Nie jest to standardowy sposób wykonania tej czynności. Ponadto nie jest pewne, czy pola tekstowe będą ustawione tak samo, dopóki nie użyjesz czcionek mono-spacji.

Należy zatem wziąć pod uwagę znacznik <TABLE> lub CSS.

Answer 3

Zwykle używasz css, aby zrobić to za Ciebie. W pliku css Dodaj:

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

input{ 

} 

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

Następnie w html by ustawić etykiety się obok pola tekstowego:

<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> 

w pliku CSS, z margin-right: 30px; linia określa, jak daleko od siebie ustawić etykietę i pole tekstowe, ustawiając szerokość zestawu pól, w zasadzie tworzy to pole zaokrąglone i możesz ustawić jego szerokość, jeśli chcesz powiększyć etykiety.

Nadzieję, że pomaga.

Martyn

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> 

Stół jest jedynym sposobem, aby kolumny wyrównane tak, że pierwsza kolumna zajmuje tylko potrzebuje szerokości (szerokość najdłuższego etykiecie). Każde inne podejście zmusza do odgadnięcia szerokości, a wyniki będą się nieuchronnie różnić, a kod nie będzie solidny (szerokość musi być dostosowywana za każdym razem, gdy zmienia się długość najdłuższej etykiety).