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;"> </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"> </div>

更多信息：

CSS Float Clear Tutorial

Answer 2

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

你可以：

使用float重写流样式，如@Sarfraz建议的那样。

或

将您的html更改为在同一行上使用除div之外的其他内容。我建议你省略“last_name”字段的divs

<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

为了节省带宽，我们不应为每个<div>和<label>对

添加<input>

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

<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;
}

我相信输出结果如下：

Demo

Answer 4

我会选择Larry K的解决方案，但是如果你想要块和内联元素的好处，你也可以将显示设置为内联块。

您可以通过插入：

在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

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

6 个答案: