Выровнять поля ввода HTML по:
У меня есть HTML-форма, такая как:
<html>
Name:<input type="text"/></br>
Email Address:<input type="text"/></br>
Description of the input value:<input type="text"/></br>
</html>
теперь метки начинаются в одном столбце, но текстовые поля начинаются в разных положениях в соответствии с длиной текста метки.
есть ли способ выровнять поля ввода таким образом, чтобы все ":" и текстовые поля начинались в одном и том же положении, а предыдущий текст был выровнен до ":" ?
Я в порядке с использованием CSS, если это может помочь в достижении этого.
7 ответов
HTML-код:
<div>
<label>Name:</label><input type="text">
<label>Email Address:</label><input type = "text">
<label>Description of the input value:</label><input type="text">
</div>
CSS:
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
вы можете использовать метку (см. JsFiddle)
в CSS
label { display: inline-block; width: 210px; text-align: right; }
HTML-код
<html>
<label for="name">Name:</label><input id="name" type="text"><br />
<label for="email">Email Address:</label><input id="email" type="text"><br />
<label for="desc">Description of the input value:</label><input id="desc" type="text"><br />
</html>
или вы можете использовать эти метки в таблице (JsFiddle)
<html>
<table>
<tbody>
<tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr>
<tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr>
<tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr>
</tbody>
</table>
</html>
установите ширину элемента формы (который должен существовать в вашем примере! ) и float (и очистить) входные элементы. Кроме того, отбросьте элементы br.
в моем случае я всегда помещаю эти материалы в тег p, как
<p>
name : < input type=text />
</p>
и так далее, а затем применяя css, как
p {
text-align:left;
}
p input {
float:right;
}
вам нужно указать ширину тега p.потому что входные теги будут плавать весь путь вправо.
этот css также повлияет на кнопку отправки. Вам нужно переопределить правило для этого тега.
Я знаю, что этот подход был принят раньше, но я считаю, что с помощью таблиц, макет может быть легко генерируется, хотя этот может быть, не лучшая практика.
HTML-код
<table>
<tr><td>Name:</td><td><input type="text"/></td></tr>
<tr><td>Age:</td><td><input type="text"/></td></tr>
</table>
<!--You can add the fields as you want-->
в CSS
td{
text-align:right;
}
используя таблицу дисплея-клетка / строка сделают работу без любой необходимой ширины.
html:
<html>
<div>
<div class="row"><label>Name:</label><input type="text"></div>
<div class="row"><label>Email Address:</label><input type = "text"></div>
<div class="row"><label>Description of the input value:</label><input type="text"></div>
</div>
</html>
CSS-Код :
label{
display: table-cell;
text-align: right;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}
Я только что дал ширину метки, и тип ввода был выровнен автоматически.
input[type="text"] {
width:100px;
height:30px;
border-radius:5px;
background-color: lightblue;
margin-left:2px;
position:relative;
}
label{
position:relative;
width:300px;
border:2px dotted black;
margin:20px;
padding:5px;
font-family:AR CENA;
font-size:20px;
}
<label>First Name:</label><input type="text" name="fname"><br>
<label>Last Name:</label><input type="text" name="lname"><br>