0

我试图将两个类放在 div 两侧的同一行。

我想要两个按钮:Login&位于 and 的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最终都位于不同行的同一侧。

4

4 回答 4

1

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

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

于 2013-03-09T05:33:04.193 回答
0

如果使用float:right;意味着它会在更大尺寸的显示器和高分辨率下产生问题,因此您可以使用left: 35%; position: absolute;div2 来解决分辨率问题。

快乐的编码...

于 2013-03-09T06:23:51.460 回答
0

尝试以下风格,

.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/

于 2013-03-09T05:31:47.533 回答
0

你可以试试这个:

编辑 :

.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;
}
于 2013-03-09T05:34:34.100 回答