[英]How to position two blocks side by side with 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>
對於我在做什么錯的任何想法,我將不勝感激。
#logo
需要float: left
那么您可能應該添加一個clear: both
在.secondardMenu
之后的clear: both
樣式容器,或使用clearfix類的容器將它們包裝
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.