具有并排输入字段的 HTML 表单

Question

我有一个基本上是垂直的 html 表单，但我真的不知道如何在同一行上创建两个文本字段。例如下面的表格，我希望名字和姓氏在同一行，而不是一个在另一个之下。

    <form action="/users" method="post"><div style="margin:0;padding:0">


            <div>
                <label for="username">First Name</label>
                <input id="user_first_name" name="user[first_name]" size="30" type="text" />

            </div>

            <div>
                <label for="name">Last Name</label>
                <input id="user_last_name" name="user[last_name]" size="30" type="text" />
            </div>
            <div>
                <label for="email">Email</label>
                <input id="user_email" name="user[email]" size="30" type="text" />
            </div>
            <div>
                <label for="pass1">Password</label>
                <input id="user_password" name="user[password]" size="30" type="password" />
            </div>
            <div>
                <label for="pass2">Confirm Password</label>

                <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />

            </div>

Answer 1

将style="float:left" 放在每个 div 上：

<div style="float:left;">...........

示例：

<div style="float:left;">
  <label for="username">First Name</label>
  <input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>

<div style="float:left;">
  <label for="name">Last Name</label>
  <input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>

要将元素放在新行上，请将此 div 放在其下方：

<div style="clear:both;">&nbsp;</div>

当然，你也可以在 CSS 文件中创建类：

.left{
  float:left;
}

.clear{
  clear:both;
}

然后你的 html 应该是这样的：

<div class="left">
  <label for="username">First Name</label>
  <input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>

<div class="left">
  <label for="name">Last Name</label>
  <input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>

要将元素放在新行上，请将此 div 放在其下方：

<div class="clear">&nbsp;</div>

更多信息：

• CSS Float Clear Tutorial

Answer 2

div 的默认显示样式是“块”。这意味着每个新 div 都将位于前一个 div 之下。

你可以：

按照@Sarfraz 的建议，使用 float 覆盖流样式。

或

更改您的 html 以在同一行上使用除 div 之外的其他元素。我建议你把 "last_name" 字段的 div 去掉

<form action="/users" method="post"><div style="margin:0;padding:0">
  <div>
    <label for="username">First Name</label>
    <input id="user_first_name" name="user[first_name]" size="30" type="text" />

    <label for="name">Last Name</label>
    <input id="user_last_name" name="user[last_name]" size="30" type="text" />
  </div>
  ... rest is same

Answer 3

为了节省带宽，我们不应该在 <label> 和 <input> 对中分别包含 <div>

此解决方案可能会更好地为您服务，并可能提高可读性

<div class="form">
            <label for="product_name">Name</label>
            <input id="product_name" name="product[name]" size="30" type="text" value="4">
            <label for="product_stock">Stock</label>
            <input id="product_stock" name="product[stock]" size="30" type="text" value="-1">
            <label for="price_amount">Amount</label>
            <input id="price_amount" name="price[amount]" size="30" type="text" value="6.0">
</div>

上面表格的css是

.form > label
{
  float: left;
  clear: right;
}

.form > input
{
  float: right;
}

我相信输出如下：

Answer 4

我会选择 Larry K 的解决方案，但如果您想要同时使用块元素和内联元素的好处，也可以将显示设置为 inline-block。

你可以在 div 标签中插入：

style="display:inline-block;"

或在 CSS 样式表中使用此方法：

div { display:inline-block; }

希望它有所帮助，但如前所述，我个人会选择 Larry K 的解决方案 ;-)

Answer 5

您应该将姓氏的输入放入您拥有名字的同一个 div 中。

<div>
    <label for="username">First Name</label>
    <input id="user_first_name" name="user[first_name]" size="30" type="text" />
    <input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>

然后，在您的 CSS 中指定您的 #user_first_name 和 #user_last_name 高度并将它们都浮动到左侧。例如：

#user_first_name{
    max-width:100px; /*max-width for responsiveness*/
    float:left;
}

#user_lastname_name{
    max-width:100px;
    float:left;
}

Answer 6

您可以使用 {display: inline-flex;} 这将产生： inline-flex