Question

我想更改网站的登录页面。

我需要在登录页面上添加注册表单，以便该页面有两种形式：一种用于登录，另一种用于注册。

我不知道如何水平设置这些表单。任何人都可以解释如何做到这一点吗？

Answer 1

这可以让您了解自己需要做什么：

<强> HTML：

<div class="container">
    <div class="form form1">Form 1</div>
    <div class="form form2">Form 2</div>
</div>

<强> CSS：

.container {
    width:100%;
    overflow:auto;
}

.form {
    width:50%;
    height:100px;
    float:left;
}

.form1 {
    background:#ccc;
}

.form2 {
    background:#999;
}

现场演示：jsFiddle

Answer 2

使用float:left：

<强> HTML：

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

<强> CSS：

input { display: block; }
form { float: left; padding-left: 15px; }

现场演示：Tinkerbin

Answer 3

您是否可以将这些表单放入div中？

<强> HTML：

<div class="left">LEFT FORM</div>
<div class="right">RIGHT FORM</div>
<div class="clear"></div>

<强> CSS：

.left { 
    float:left;
    width:300px;
}
.right {
    width:300px;
}
.clear {
    clear:left;
}

在一个HTML中水平显示两个表单

3 个答案: