在CSS中对齐表单元素
在CSS中对齐表单元素
提问于 2012-11-03 06:41:27
我是CSS的新手，有一个简单的登录表单，我试图正确地对齐。基本上是两列，标签和Login按钮在一列，文本框在另一列。我如何在CSS中做到这一点？
HTML代码为：
<body>
<form action="" method="post">
<label> Username </label>
<input type="text"/>
<label> Password </label>
<input type="password"/>
<input type="submit" value="submit"/>
</form>
</body>回答 2
Stack Overflow用户
发布于 2012-11-03 06:53:24
对于您提出的问题，我会简单地将它们放在一个表中。
<form action="" method="post">
<table>
<tr>
<td><label> Username </label></td>
<td><input type="text"/></td>
</tr>
<tr>
<td><label> Password </label></td>
<td> <input type="password"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="submit"/></td>
</tr>
</table>
</form> 下面是它将是什么样子的http://jsfiddle.net/wCSAn/
Stack Overflow用户
发布于 2018-08-23 12:08:29
还可以使用CSS中的position属性根据需要以特定的指定方式对齐标签和输入。这样，它们就会根据父元素进行排列。
form {
position: relative;
width: 70%;
text-align: right;
}
label {
width: 30%;
position: absolute;
left: 10%;
text-align: right;
margin-right: 30px;
}
input[type=submit] {
position: absolute;
left: 25%;
background-color: #9AE5F8;
}这是它的jsfiddle的链接。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13204002
复制相关文章
相似问题
腾讯云开发者
