Как я могу выровнять форму по горизонтали?

Question

Как я могу выровнять форму по горизонтали? Например:

<form>
<input type="email" placeholder="example@ravvel.com">
<div> 
<input class="enter" type="submit" value="Send"/> 
</div>
</form>

Даст коробки как таковые:

email
send

В то время как я хочу, чтобы они появлялись таким образом:

email send

Answer 1

удалить тег div следующим образом:

<form>
<input type="email" placeholder="example@ravvel.com">
<input class="enter" type="submit" value="Send"/> 
</form>

Answer 2

Избавьтесь от своего DIV.Вам это не нужно.

<form>
<input type="email" placeholder="example@ravvel.com">
<input class="enter" type="submit" value="Send"/> 
</form>

Answer 3

Простой способ:

<form> 
<input type="email" placeholder="example@ravvel.com"> 
<input class="enter" type="submit" value="Send"/>
</form>

Более стильный способ:

<form> 
<div style="float:left"><input type="email" placeholder="example@ravvel.com"></div> 
<div style="float:left"><input class="enter" type="submit" value="Send"/></div> 
</form>

Answer 4

Странно, но в моем случае простое удаление div не помогло. Я должен явно поставить «float: left» для каждого ввода, чтобы получить все в одной строке. Надеюсь, это поможет кому-то, кто попадает в ту же ситуацию.

Answer 5

<input type="text"/>
<input type="submit"/>

Входные элементы являются inline-block, то есть они всегда находятся на одной строке, причина, по которой вы получили 2 строки, заключается в том, что элемент div является элементом блока, чтобы его можно было выровнять с другими элементы в той же «линии», он должен быть плавающим или располагаться не относительно.

пример

Answer 6

Если вы хотите, чтобы все поля внутри формы были выровнены, вы можете добавить display: inline как правило CSS к содержащим элементам. Обычно я люблю использовать теги абзаца для разделения каждого ярлыка + входного тега или неупорядоченного списка. Чтобы обновить ваш пример:

<form>
  <ul>
    <li><input type="text" type="email" placeholder="example@example.com" /></li>
    <li><input type="text" type="submit" value="send" /></li>
  </ul>
</form>

<style type="text/css" media="screen">
  form ul {
    list-style:none;
  }
  form li {
    display:inline;
  }
</style>

Это будет работать для каждого поля, добавляемого в качестве нового элемента списка.

Answer 7

Ну, проще говоря - если вы используете float:left на ваших div элементах, он должен выровнять их по горизонтали и направить вас.

<form>
    <input type="email" placeholder="example@ravvel.com" style="float:left;">
    <div> 
        <input class="enter" type="submit" value="Send" style="float:left;"/> 
    </div>
</form>

Answer 8

Добавьте свойство CSS display со значением inline в DIV:

#yourdiv
{
  display: inline;
}

Answer 9

Вы можете добавить стиль float: left к каждому div, который охватывает элементы формы.