如何在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

将表单中的表单浮动到其父控件中。您可能还需要设置合适的宽度以便在不同的浏览器上进行布局，具体取决于边距和填充等。

HTML：

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

CSS：

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

Answer 3

您可以将每个表单放在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>

Voila应该这样做。

Answer 4

有许多轻量级的CSS框架可以解决您希望的页面元素的水平样式。这些框架将处理不同的浏览器细微差别，让您专注于编码而不是布局：

• Bootstrap, from Twitter
• Blueprint CSS
• Normalize.css

Answer 5

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

Answer 6

或者，也许是这样（对于适当的间距，在任何屏幕尺寸上）：

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