Html 将div放在另一侧的一行中

我试着把两个类放在同一条线上，在一个div的两边

我希望两个按钮：

Login

和

Register

位于

#home按钮的最末端，并且位于同一行

以下是
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>

但是，不管我怎么做，这两个按钮：
Login
&
Register
最终都位于不同行的同一侧

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

登录和注册位于不同行的原因是它们都是块级元素。您必须浮动其中一个或两个以将它们放在同一行上，或使它们内联

以下是一个例子：



登录
登记
#右{浮点：右；宽度：100px；}
#右左{float:left；}
#right-right{float:right；}

在本例中，Login和Register位于100像素宽且向右浮动的div的两侧。
您可以尝试以下方法：

编辑：

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

如果使用
float:right
意味着它将在更大的显示器和高分辨率中产生问题，因此您可以使用
左：35%；位置：绝对位置用于div2解决解决问题

快乐编码…
未经表决就接受了答案；）
<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-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;
}