San*_*kar 56 html css user-interface html5 alignment
我有一个HTML表单,如:
<html>
Name:<input type="text"/></br>
Email Address:<input type="text"/></br>
Description of the input value:<input type="text"/></br>
</html>
现在标签都在同一列中开始,但文本框根据标签的文本长度以不同的位置开始.
有没有办法对齐输入字段,使得所有":"和文本框将从相同的位置开始,前面的文本将右对齐,直到":"？
我可以使用CSS,如果这可以帮助实现这一点.
Dan*_*oul 92
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;
}
huy*_*itw 19
你可以使用一个标签(见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>
小智 5
使用 display table-cell/row 无需任何宽度即可完成这项工作。
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;
}