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 - это «блок». Это означает, что каждый новый div будет ниже предыдущего.

Вы можете:

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

или

Измените ваш HTML, чтобы использовать что-то кроме div для элементов, которые вы хотите в той же строке. Я предлагаю вам просто пропустить 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

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

Я считаю, что результат будет следующим:

Answer 4

Вы должны поместить ввод для фамилии в тот же 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 height и поместите их оба влево.Например:

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

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

Answer 5

Я бы пошел с решением Ларри К., но вы также можете установить дисплей на встроенный блок , если вы хотите использовать преимущества как блочных, так и встроенных элементов.

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

style="display:inline-block;"

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

div { display:inline-block; }

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