Question

我是css的新手，并且有一个简单的登录表单，我正在尝试正确对齐。基本上是两列，一列中有标签和登录按钮，另一列中有文本框。我怎么在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>

Answer 1

这是一种有效的方法：

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

调整尺寸和边距以适应您的用例和美学。

Answer 2

对于你的要求，我只是把它们放在一张桌子里。

  <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/

Answer 3

我在博文中回答了这个问题：https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/

它指的是这个小提琴：https://jsfiddle.net/wscherphof/9sfcw4ht/9/

掠夺者：float: right;是正确的方向，但需要更多注意才能获得整洁的结果。

Answer 4

您还可以使用CSS中的position属性在特定位置对齐 label 和 input 指定的方式，这样就可以根据父元素进行排列。

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

的链接

在css中对齐表单元素

4 个答案: