Допустим, у меня есть 10 полей ввода, и перед полями ввода с левой стороны у меня есть тег span, который содержит текст для указания того, что пользователь должен ввести в поле. Я сделал кое-что, но не знаю, как добавить пространство между тегом span и полем ввода независимо от размера текста?
Например:
Прошло некоторое время, и я изменил свой подход при создании форм. Я сделал тысячи таких форм до сегодняшнего дня и очень устал вводить id для каждой пары label/input
, так что это было спущено в унитаз. Когда вы погружаете input
прямо в label
, все работает точно так же, никаких идентификаторов не нужно. Я также воспользовался тем, что flexbox
очень гибкий.
HTML:
<label>
Short label <input type="text" name="dummy1" />
</label>
<label>
Somehow longer label <input type="text" name="dummy2" />
</label>
<label>
Very long label for testing purposes <input type="text" name="dummy3" />
</label>
CSS:
label {
display: flex;
flex-direction: row;
justify-content: flex-end;
text-align: right;
width: 400px;
line-height: 26px;
margin-bottom: 10px;
}
input {
height: 20px;
flex: 0 0 200px;
margin-left: 10px;
}
[Fiddle DEMO][1]
Используйте label
вместо span
. Он предназначен для сопряжения с входами и сохраняет некоторую дополнительную функциональность (щелчок по метке фокусирует вход).
Это может быть именно то, что вам нужно:
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;
}
[jsfiddle DEMO здесь.][2].
Вы также можете использовать приведенный ниже код
<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>
Вы можете использовать таблицу
<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>
Результат будет таким: ImageResult