我是新来的css,并有一个简单的登录表单,我正在努力正确对齐.基本上两列标签和一个列中的“登录”按钮,另一列中的文本框.如何在css中执行此操作？
<body>
<form action="" method="post">
<label> Username </label>
<input type="text"/>
<label> Password </label>
<input type="password"/>
<input type="submit" value="submit"/>
</form>
</body>
解决方法
这是一种有效的方法：
form {
width: 80%;
margin: 0 auto;
}
label,input {
/* in order to define widths */
display: inline-block;
}
label {
width: 30%;
/* positions the label text beside the input */
text-align: right;
}
label + input {
width: 30%;
/* large margin-right to force the next element to the new-line
and margin-left to create a gutter between the label and input */
margin: 0 30% 0 4%;
}
/* only the submit button is matched by this selector,but to be sure you Could use an id or class for that button */
input + input {
float: right;
}
调整尺寸和边距,以适应您的用例和审美.
原文地址：https://www.jb51.cc/css/217104.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
