Как расположить формы горизонтально на HTML-странице?

Question

У меня есть две формы, и по умолчанию они будут отображаться на HTML-странице вертикально.Однако из-за ограниченности пространства страницы их лучше расположить горизонтально с помощью CSS.

Формы выглядят следующим образом:

<form>Form A</form>
<form>Form B</form>

Любойпомощь в CSS?

Answer 1

используйте float:left в формах.

HTML:

<form>Form A</form>
<form>Form B</form>

CSS:

form
{
    float:left;
}

Answer 2

Вы можете поместить каждую форму в div. Как только у вас будет 2 div, используйте css, чтобы сузить и плавайте их влево, чтобы расположить их рядом друг с другом. Вы также можете добавить эти классы в форму вместо div. то есть:

<div class="form_wrapper">
    <form></form>
</div>
<div class="form_wrapper">
    <form></form>
</div>

OR

<form class="form_wrapper"></form>
<form class="form_wrapper"></form>

Ваш CSS:

<style>
    .form_wrapper {
        width: 200px; /* the width of half of your space or 50% */
        float: left;
    }
</style>

Вуаля, которая должна это сделать.

Answer 3

Плавающие формы, оставленные внутри родительского контроля. Вам также может понадобиться установить подходящую ширину, чтобы правильно расположить макет в разных браузерах, в зависимости от полей, отступов и т. Д.

HTML:

<form class="colform">Form A</form>
<form class="colform">Form B</form>

CSS:

.colform { float:left; width:50%;}

Answer 4

Или, может быть, так (для правильного расстояния, на любом размере экрана):

form { 
    width:35%;
    float:left;
    padding-left:5%;
    padding-right:10%;
}

Answer 5

form { 
width:50%;
float:left;
}

Answer 6

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

• Bootstrap, из Twitter
• Blueprint CSS
• Normalize.css