在 CSS 中对齐表单元素答案

【问题标题】：Align form elements in CSS在 CSS 中对齐表单元素
【发布时间】：2020-09-22 03:20:07
【问题描述】：

我是 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>

【问题讨论】：

输入密码和用户名后添加
。

标签： css

【解决方案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;
}

<form action="#" method="post">
  <!-- note that I've added a 'for' attribute to
       both of the <label> elements, which is
       equal to the 'id' attribute of the relevant
       <input> element; this means that clicking
       the <label> will focus the <input>: -->
  <label for="username">Username</label>
  <input id="username" type="text" />

  <label for="password">Password</label>
  <input id="password" type="password" />

  <input type="submit" value="submit" />
</form>

JS Fiddle demo.

当然可以调整尺寸和边距以适合您的用例和审美。

当然，目前还有其他方法可以实现这一点，例如 CSS Grid：

*,
::before,
::after {
  /* selecting all elements on the page, along with the ::before
     and ::after pseudo-elements; resetting their margin and
     padding to zero and forcing all elements to calculate their
     box-sizing the same way, 'border-box' includes the border-widths,
     and padding, in the stated width: */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

form {
  /* Using CSS Grid to lay out the elements in two-dimensions: */
  display: grid;
  /* specifying a 0.5em gutter/gap between adjacent elements: */
  gap: 0.5em;
  /* declaring a number of named grid areas in order to lay out
     the child elements; the areas identified with a period (.)
     are 'empty' areas, whereas the areas named by strings are
     used, later, to place elements according to those names: */
  grid-template-areas:
    "usernameLabel . usernameInput"
    "passwordLabel . passwordInput"
    ". . submit";
  /* declaring the size of each of the three columns; 1fr is
     one fractional unit of the available space, and is the
     size of the first and last of the columns. The central
     column is declared as being 0.5em in width: */
  grid-template-columns: 1fr 0.5em 1fr;
  margin: 1em auto;
  width: 80%;
}

label {
  /* placing all <label> elements in the grid column 1 (the first): */
  grid-column: 1;
  /* aligning text-content to the right in order to position the label
     text near to the relevant <input>: */
  text-align: right;
}

label::after {
  content: ':';
}

input {
  grid-column: 3;
}

button {
  /* positioning the <button> element in the grid-area identified
     by the name of 'submit': */
  grid-area: submit;
}

<form action="" method="post">
  <label for="username">Username</label>
  <input id="username" type="text" />

  <label for="password">Password</label>
  <input id="password" type="password" />

  <input type="submit" value="submit" />
</form>

JS Fiddle demo.

参考资料：

参考书目：

“Basic Concepts of grid layout.”

【讨论】：

【解决方案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/

【讨论】：

这不是表格数据，因此不应该在表格中
问题询问如何在 CSS 中做到这一点。尽管表格很诱人，因为它们可以完成工作，但这不是一个好习惯。
有行有列——这是一张表。
“行”和“列”不足以使用表格。表格应仅用于表格数据（即在电子表格应用程序中有意义的数据）。表单绝对不是表格。
网格比这种方法更干净。这不是 2005 年...

【解决方案3】：

您还可以使用 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的链接。

【讨论】：