在css中对齐表单元素

我是新来的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;
}

JS Fiddle demo.

调整尺寸和边距,以适应您的用例和审美.

在css中对齐表单元素

解决方法

相关文章