将div放在另一侧的一行中

Question

我试着把两个类放在同一行的div的两边。

我想要两个按钮：Login和Register在#home-button的两端，并且在同一行上。

下面是HTML代码：

<div id="content">
    <div id="lcol" class="lfloat">
        Hello
    </div>
    <div id="home-button" class="rfloat">
        <a href="#"><div class="login-button Login">Login</div></a>
        <a href="#"><div class="login-button Register">Register</div></a>
    </div>
</div>

我的CSS：

.login-button{
    background:#4578bc;
    color:#fff;
    padding:15px 20px;
    text-align:center;
}

#home-button{
    width:100px;
    margin:100px 0 0 0;
}

.lfloat{float:left}
.rfloat{float:right}

然而，无论我怎么尝试，Login和Register这两个按钮最终都在同一侧的不同行上。

Answer 1

试着遵循风格，

.login-button {
    background:#4578bc;
    color:#fff;
    padding:15px 20px;
    text-align:center;
    display:inline-block;
}
#home-button {
    margin:100px 0 0 0;
}

http://jsfiddle.net/YvUER/

Answer 2

Login和Register位于不同的行是因为它们都是块级元素。您必须将它们中的一个或两个浮动，才能将它们放在同一行上，或者使它们内联。

下面是一个示例：

http://jsfiddle.net/K2Rtr/

<div id="right">
    <div id="right-left">Login</div>
    <div id="right-right">Register</div>
</div>

#right { float: right; width: 100px;}
#right-left {float: left; }
#right-right {float: right;}

在这个例子中，Login和Register位于一个100px宽的、向右浮动的div的两边。

Answer 3

您可以尝试这样做：

编辑：

.login-button {
background: #4578BC;
color: white;
padding: 15px 20px;
text-align: center;
width: 100px;
float: left;
}

#home-button {
width: 282px;
margin: 100px 0 0 0;
float: right;
}