浮標導航到徽標的右側

我的網站左上角有一個徽標。我試圖將導航菜單垂直對齊到徽標的右側。但它總是出現在標誌的底部。我嘗試了float：left。浮標導航到徽標的右側

我想這是一件簡單的事情，但我做不到。我可能需要一個包裝。我在這裏做錯了什麼？

這是我的HTML

<div class="container"> 

    <div class="logo"><a href="/"><img src="assets/images/logo.png" alt="" width="250" height="120"/></a> 


<div class="topnav"> 
<nav> 
    <ul> 
    <li><a href="http://www.kursatkarabulut.com/">Home</a></li> 
     <li><a href="http://www.kursatkarabulut.com/fiap/">Photos</a></li>   
    </ul> 
</nav> 

    </div> 
</div>

這是我的CSS

.logo { 


} 
#topnav { 
    width:100%; 
    vertical-align:middle; 
} 


nav ul { 
    background: #FFFFFF; 
    padding: 0 10px; 
    list-style: none; 
    position:relative; 
    float:left; 
    display: inline-table; 
    font-size:90%; 
    color:#666666; 
}

來源

2013-02-25 showbiz

有一些問題與您的標記，你應該知道的。您的嵌套已關閉（除非您希望所有內容都位於徽標div內）並且容器關閉div已丟失。 – slamborne 2013-02-25 19:44:52

只需將float: left添加到徽標類就可以了：http://jsfiddle.net/dssHf/ 我也調整了HTML代碼，因爲它是無效的。

<div class="container"> 

    <div class="logo"><a href="/"><img src="http://placehold.it/250x120" alt="" /></a></div> 

    <div class="topnav"> 
     <nav> 
      <ul> 
       <li><a href="http://www.kursatkarabulut.com/">Home</a></li> 
       <li><a href="http://www.kursatkarabulut.com/fiap/">Photos</a></li>   
      </ul> 
     </nav> 
    </div> 
</div>

.container { 
    clear: both; 
} 
.logo { 
    float: left; 
} 
.logo img { 
    width: 250px; 
    height: 120px; 

} 
.topnav { 
    margin-left: 260px; 
}

來源

2013-02-25 19:41:42

變化.logo這樣：

.logo img { 
    float:left; 
}

http://jsfiddle.net/87KCt/4/

CSS是中國航天科技集團公司ading樣式表。這意味着幾件事情，但這裏級聯意味着類.logo的樣式級聯到img標籤只。

來源

2013-02-25 19:40:05 fredsbend

浮標導航到徽標的右側

回答

相關問題