Załóżmy, że mam 10 pól wejściowych i przed polami wejściowymi po lewej stronie mam znacznik zakresu, w którym znajduje się tekst wskazujący, co powinien wprowadzić użytkownik w polu. Zrobiłem pewne rzeczy, ale nie jestem pewien, jak dodać spację pomiędzy tagiem span i polem wejściowym, niezależnie od tego, jak duży jest tekst?Jak równomiernie dodać spację między etykietą a polem wprowadzania niezależnie od długości tekstu?
Jak to:
Zastosowanie label zamiast span. Ma być sparowany z wejściami i zachowuje pewne dodatkowe funkcje (kliknięcie etykiety skupia dane wejściowe).
To może być dokładnie to, co chcesz:
HTML:
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
CSS:
label {
width:180px;
clear:left;
text-align:right;
padding-right:10px;
}
input, label {
float:left;
}
Dzięki. W twoim przykładzie masz etykietę o wartości równej wartości w atrybucie name i value. Jestem trochę nowy, więc chciałem wiedzieć, jaka jest wartość, która powinna być w etykiecie? Wartość w polu nazwy lub polu wartości? Czy może to być cokolwiek? – starbucks
Każdy atrybut/zawartość tagu może być dowolna. Jedyną rzeczą, która musi się zgadzać, jest atrybut 'for' etykiety i wejściowy atrybut' id', aby uzyskać logikę formularza. "Nazwa" i "identyfikator" każdego wejścia nie muszą być takie same, ale jest to zalecana dobra praktyka, aby uniknąć dalszych nieporozumień podczas przeglądania formularza. Mam nadzieję, że to pomaga :) –
Jest to również ze względów związanych z ułatwieniami dostępu, w ten sposób etykieta jest powiązana z tym wejściem, i możesz kliknąć etykietę, aby "skupić" dane wejściowe. –
Można również stosować poniżej kod
<html>
<head>
<style>
.labelClass{
float: left;
width: 113px;
}
</style>
</head>
<body>
<form action="yourclassName.jsp">
<span class="labelClass">First name: </span><input type="text" name="fname"><br>
<span class="labelClass">Last name: </span><input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Nie używaj "" dla etykiety, semantycznie poprawną metodą jest użycie znacznika '
Można użyć tabeli
<table class="formcontrols" >
<tr>
<td>
<label for="Test">FirstName:</label>
</td>
<td style="padding-left:10px;">
<input id="Test" name="Test" value="John">
</td>
</tr>
<tr>
<td>
<label for="Test">Last name:</label>
</td>
<td style="padding-left:10px;">
<input id="lastName" name="lastName" value="Travolta">
</td>
</tr>
</table>
Wynik byłby: ImageResult
Można to osiągnąć stosując nowy CSS display: grid (browser support)
HTML:
<div class='container'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
CSS:
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Podczas korzystania z siatki css domyślnie elementy są ułożone kolumna po kolumnie, a następnie wiersz po wierszu. Reguła grid-template-columns tworzy dwie kolumny siatki, jedna, która zajmuje 1/4 całkowitej poziomej przestrzeni, a druga zajmuje 3/4 poziomej przestrzeni. Stwarza to pożądany efekt.
Zawsze można użyć „pre” tag wewnątrz etykiety, a następnie po prostu wprowadzić puste przestrzenie w nim, więc zawsze można dodać taką samą lub inną liczbę miejsc wymagać
<form>
<label>First Name :<pre>Here just enter number of spaces you want to use(I mean using spacebar to enter blank spaces)</pre>
<input type="text"></label>
<label>Last Name :<pre>Now Enter enter number of spaces to match above number of
spaces</pre>
<input type="text"></label>
</form>
nadzieję, że lubisz moją odpowiedź, jest to prosty i skuteczny Hack
Oto niektóre próbki na JSFiddle: http: // js fiddle.net/qAhQf/ – starbucks
Przede wszystkim użyj 'etykieta' zamiast' span'. Ma być sparowany z wejściami i zachowuje pewne dodatkowe funkcje (kliknięcie etykiety skupia dane wejściowe). Tak czy inaczej. Co dokładnie masz na myśli, mówiąc "jak dodawać rzeczy między tagiem span i danymi wejściowymi"? Jakie rzeczy? Czy chcesz, aby wszystkie etykiety miały tę samą szerokość niezależnie od zawartości? –
Przepraszamy za niepoprawne słowo, miałem na myśli nawet miejsce. – starbucks