CSS显示内联两种形式而不使用float

Question

在html/css中的

我只有两个表单，我想使用inline将其设置为float widthout的单行。你可以看到这个ONLINE DEMO

在下面的代码中，我想将display:inline设置为将单行设为两个div。喜欢这个屏幕截图：

HTML：

<div class='single-page'>
    <div id="verification-panel">
        <form>
            <fieldset>
                <legend>verification code</legend>
                <label>Mobile Number:</label>
                <input type="text" class="inputs" placeholder="EX:">
                <span class="help-block"></span>
                <button type="button" class="btn">Submit</button>
            </fieldset>
        </form>
    </div>
    <div id="activation-panel">
        <form>
            <fieldset>
                <legend>Active Acount</legend>
                <label>Verfication code:</label>
                <input type="text" class="inputs" placeholder="Verficcation code">
                <span class="help-block"></span>
                <button type="button" class="btn">Submit</button>
            </fieldset>
        </form>
    </div>
</div>

Answer 1

使用display:inline-block;

#verification-panel,#activation-panel{
    display:inline-block;
}

Answer 2

将此代码复制到CSS部分：

.single-page {
display: inline-block;
width: 769px;
}

.verification-panel,
.activation-panel { display: inline-block; }

要使表单内联，除了将display: inline-block声明为两个类之外，您必须为父容器定义一个足够宽的宽度，以使它们彼此相邻。

Answer 3

这是demo

   .single-page{
    display: inline;
    width: 100%;
}
#verification-panel,#activation-panel{
        display: inline-block;
        width: 49%; // because of margin or etc.
}

Answer 4

#verification-panel,#activation-panel{
display:inline-block; width:250px;

}