带有并排输入字段的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教程

Answer 2

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

您可以:

使用float覆盖流样式,如@Sarfraz建议的那样.

要么

将你的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

为了节省带宽起见，我们不应该包括<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;
}

我相信输出将如下所示：