如何使用 CSS 并排放置两个块
我有一个徽标和一个二级菜单，我希望它们出现在同一行（徽标位于最左侧，菜单位于最右侧）。徽标宽度未定义，二级菜单宽度为 200px 宽。当我应用以下 CSS 时，辅助菜单被推至徽标下方的行（但仍在页面的右侧）：
#logo {
padding-bottom: 40px;
}
.secondaryMenu {
width: 200px;
float: right;
margin-right: 0px;
padding-right: 2px;
color: black;
font-size: 9px;
letter-spacing: 1px;
text-align: right;
}
这是 HTML 的相关部分：
<div id="logo">
<a href="index.html"> <img id="logoimg" border="0" alt="" src="images/logo.gif"/> </a>
</div>
<div class="secondaryMenu">
<a href="about.html">About</a> | <a href="services.html">Services</a> |
<a href="contactus.html">Contact Us</a>
</div>
如果您对我正在做的事情有任何想法，我将不胜感激错误的。
I have a logo and a secondary menu that I would like to appear on the same line (the logo on the far left, and the menu on the far right). The logo width is undefined and the secondary menu width is 200px wide. When I apply the following CSS, the secondary menu is pushed to the line below the logo (but still on the right side of the page):
#logo {
padding-bottom: 40px;
}
.secondaryMenu {
width: 200px;
float: right;
margin-right: 0px;
padding-right: 2px;
color: black;
font-size: 9px;
letter-spacing: 1px;
text-align: right;
}
Here is the relevant part of the HTML:
<div id="logo">
<a href="index.html"> <img id="logoimg" border="0" alt="" src="images/logo.gif"/> </a>
</div>
<div class="secondaryMenu">
<a href="about.html">About</a> | <a href="services.html">Services</a> |
<a href="contactus.html">Contact Us</a>
</div>
I would appreciate any thoughts on what I'm doing wrong.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
#logo需要float: left那么你应该在
.secondardMenu之后添加一个clear: Both样式的容器或者用 clearfix 类容器包装它们#logowould need tofloat: leftthen you should probably add a
clear: bothstyled container after.secondardMenuor wrap them both with a clearfix class'd container