Вопросы Теги

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>
16
задан Sarfraz 15 August 2010 в 17:37
поделиться

3 ответа

Стиль отображения по умолчанию для 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
8
ответ дан 30 November 2019 в 16:57
поделиться

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

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

style="display:inline-block;"

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

div { display:inline-block; }

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

1
ответ дан 30 November 2019 в 16:57
поделиться

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

Подробнее:

20
ответ дан 30 November 2019 в 16:57
поделиться