yos*_*osh 107 html forms alignment
我是HTML的新手,我正在努力学习如何使用表单.
到目前为止,我遇到的最大问题是调整表格.以下是我当前HTML文件的示例:
<form>
First Name:<input type="text" name="first"><br />
Last Name:<input type="text" name="last"><br />
Email:<input type="text" name="email"><br />
</form>
问题是,"电子邮件"之后的字段框在间距方面与第一个和最后一个名称相比有很大差异.什么是"正确"的方式使它们"排列"基本上？
我正在努力练习良好的形式和语法...很多人可能会用CSS做这个我不确定,到目前为止我只学习了HTML的基础知识.
Clé*_*ent 122
接受的答案(以像素为单位设置显式宽度)使得很难进行更改,并在用户使用不同的字体大小时中断.另一方面,使用CSS表格效果很好:
form { display: table; }
p { display: table-row; }
label { display: table-cell; }
input { display: table-cell; }<form>
<p>
<label for="a">Short label:</label>
<input id="a" type="text">
</p>
<p>
<label for="b">Very very very long label:</label>
<input id="b" type="text">
</p>
</form>这是一个JSFiddle:http://jsfiddle.net/DaS39/1/
如果您需要右对齐的标签,只需添加text-align: right到标签:http://jsfiddle.net/DaS39/
编辑:还有一个快速说明:CSS表还允许您使用列:例如,如果您想使输入字段占用尽可能多的空间,您可以在表单中添加以下内容
<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>
你可能想要添加white-space: nowrap到labels那种情况.
ser*_*alk 55
另一个例子,这使用CSS,我只是将表单放在带有容器类的div中.并指定其中包含的输入元素是容器宽度的100%,并且两侧都没有任何元素.
.container {
width: 500px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}<html>
<head>
<title>Example form</title>
</head>
<body>
<div class="container">
<form>
<label>First Name</label>
<input type="text" name="first"><br />
<label>Last Name</label>
<input type="text" name="last"><br />
<label>Email</label>
<input type="text" name="email"><br />
</form>
</div>
</body>
</html>amo*_*ett 29
如果您不熟悉HTML,那么一个简单的解决方案就是使用表来排列所有内容.
<form>
<table>
<tr>
<td align="right">First Name:</td>
<td align="left"><input type="text" name="first" /></td>
</tr>
<tr>
<td align="right">Last Name:</td>
<td align="left"><input type="text" name="last" /></td>
</tr>
<tr>
<td align="right">Email:</td>
<td align="left"><input type="text" name="email" /></td>
</tr>
</table>
</form>
小智 16
我发现将标签的显示更改为内联块并设置宽度要容易得多
label {
display: inline-block;
width:100px;
text-align: right;
}
小智 7
你应该使用一张桌子.作为逻辑结构的问题,数据是表格式的:这就是您希望它对齐的原因,因为您希望在二维结构中显示标签不仅与输入框相关,而且还与彼此相关.
[考虑如果要显示字符串或数值而不是输入框,您会怎么做.]