html - 将 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

登录和注册之所以在不同的行，是因为它们都是 block 级元素。您必须 float 它们中的一个或两个以将它们放在同一行上，或者使它们内联。

这是一个例子:

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;}

在此示例中，登录和注册位于 100 像素宽并向右浮动的 div 的相对两侧。