HTML-форма с боковыми полями ввода

У меня есть 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>

Ответы

Ответ 1

Стиль отображения по умолчанию для div - это "блок". Это означает, что каждый новый div будет находиться под предыдущим.

Вы можете:

Переопределите стиль потока, используя float, как предлагает @Sarfraz.

или

Измените свой html, чтобы использовать что-то другое, кроме div, для элементов, которые вы хотите в одной строке. Я предлагаю вам просто оставить поля для поля "last_name"

<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

Ответ 2

Поместите 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

Ответ 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;
}

Я считаю, что вывод будет следующим:

Ответ 4

Я бы пошел с решением Larry K, но вы также можете настроить отображение встроенного блока, если вы хотите использовать преимущества как блочных, так и встроенных элементов.

Вы можете сделать это в теге div, вставив:

style="display:inline-block;"

Или в стили CSS с помощью этого метода:

div { display:inline-block; }

Надеюсь, что это поможет, но, как упоминалось ранее, я лично поеду для решения Ларри К. -)

Ответ 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;
}