Question

我的页面上有一些表单，但它们并没有排成一行。他们不会在另一个人之下。

如需更多许可，请fiddle。

这是代码：

<section id="content">

    <div id="logo">
            <h1>Naughty Mama.</h1>

    </div>
    <div id="container">
        <form id="sign_in">
            <table style="margin: 0 auto;">
                <tr>
                    <td align="left">Sign In</td>
                </tr>
                <tr>
                    <td>
                        <input class="input" type="email" placeholder="Username" name="username" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input class="input" type="password" placeholder="Password" name="password" />
                        <br />
                    </td>
                </tr>
                <tr align="right">
                    <td>
                        <input class="btn" type="submit" value="Sign In">
                    </td>
                </tr>
            </table>
        </form>
        <!-- <hr width="1px" align="left" />-->
        <form id="sign_up">
            <table style="margin: 0 auto;">
                <tr>
                    <td align="left">Create An Account</td>
                </tr>
                <tr>
                    <td>
                        <input class="input" type="email" placeholder="Username" name="username" />
                        <br />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input class="input" type="password" placeholder="Password" name="password" />
                    </td>
                </tr>
                <tr align="right">
                    <td>
                        <input class="btn" type="submit" value="Sign Up" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
</section>

CSS：

@CHARSET"ISO-8859-1";
 html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: #333;
    color: #eee;
    font-family: Calibri;
}
#content {
    margin-top: 10%;
}
#logo {
    margin: 0 auto;
    width: 80%;
    text-align: center;
    font-size: 35px;
}
#container {
    margin: 0 auto;
    width: 80%;
    text-align: center;
}
.btn {
    background: #e1ffff;
    background: -moz-linear-gradient(top, #e1ffff 0%, #bee4f8 0%, #c8eefb 75%, #b1d8f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e1ffff), color-stop(0%, #bee4f8), color-stop(75%, #c8eefb), color-stop(100%, #b1d8f5));
    background: -webkit-linear-gradient(top, #e1ffff 0%, #bee4f8 0%, #c8eefb 75%, #b1d8f5 100%);
    background: -o-linear-gradient(top, #e1ffff 0%, #bee4f8 0%, #c8eefb 75%, #b1d8f5 100%);
    background: -ms-linear-gradient(top, #e1ffff 0%, #bee4f8 0%, #c8eefb 75%, #b1d8f5 100%);
    background: linear-gradient(to bottom, #e1ffff 0%, #bee4f8 0%, #c8eefb 75%, #b1d8f5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1ffff', endColorstr='#b1d8f5', GradientType=0);
    border: 0;
    width: 100px;
    height: 35px;
    border-radius: 3px;
}
.btn:hover {
    background: #b1d8f5;
    background: -moz-linear-gradient(top, #b1d8f5 0%, #e6f8fd 30%, #bee4f8 75%, #b1d8f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b1d8f5), color-stop(30%, #e6f8fd), color-stop(75%, #bee4f8), color-stop(100%, #b1d8f5));
    background: -webkit-linear-gradient(top, #b1d8f5 0%, #e6f8fd 30%, #bee4f8 75%, #b1d8f5 100%);
    background: -o-linear-gradient(top, #b1d8f5 0%, #e6f8fd 30%, #bee4f8 75%, #b1d8f5 100%);
    background: -ms-linear-gradient(top, #b1d8f5 0%, #e6f8fd 30%, #bee4f8 75%, #b1d8f5 100%);
    background: linear-gradient(to bottom, #b1d8f5 0%, #e6f8fd 30%, #bee4f8 75%, #b1d8f5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b1d8f5', endColorstr='#b1d8f5', GradientType=0);
}
input[type=email] {
    width: 250px;
    height: 25px;
    border-radius: 3px;
    border: 0;
    padding: 7px;
    font-family: Calibri;
    font-size: 20px;
}
input[type=password] {
    width: 250px;
    height: 25px;
    border-radius: 3px;
    border: 0;
    padding: 7px;
    font-family: Calibri;
    font-size: 20px;
}

如何将这些表格整理成一行？

谢谢，

Areeb

Answer 1

将其添加到样式表中：

form {float: left;}

表单是块元素，这就是为什么表单在其他下方显示的原因

修改

尝试此操作以查看表单居中而不是上面的代码：

form {display: inline-block;}

css - 将表格排成一行

1 个答案: