如何在HTML中对齐输入表单
如何在HTML中对齐输入表单
提问于 2010-11-30 10:14:20
我是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>问题是，与名字和姓氏相比，“Email”之后的字段框在间距方面有很大的不同。什么是“适当”的方式，使他们“阵容”本质上？
我正在努力练习良好的形式和语法……很多人可能会用CSS做到这一点，我不确定，到目前为止我只学到了HTML的基础知识。
回答 14
Stack Overflow用户
回答已采纳
发布于 2010-11-30 10:26:51
另一个例子，使用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>
Stack Overflow用户
发布于 2010-11-30 10:25:24
如果您是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>Stack Overflow用户
发布于 2013-08-09 05:55:23
我发现将标签的显示更改为inline-block并设置宽度要容易得多
label {
display: inline-block;
width:100px;
text-align: right;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4309950
复制相关文章
相似问题