我试图将两个类放在同一条线上,位于 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
最终都位于不同行的同一侧。
最佳答案
登录和注册之所以在不同的行,是因为它们都是 block 级元素。您必须 float 它们中的一个或两个以将它们放在同一行上,或者使它们内联。
这是一个例子:
<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 的相对两侧。
关于html - 将 div 放在对面的单行中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15307533/