獲取圖像和列表出現在同一行

Question

這是我的代碼：http://jsfiddle.net/FMfDM/1/

我似乎無法讓我的標誌形象坐在同一行我的列表，即使我把display:inline上圖片。

任何人都可以請告訴我什麼是正確的做法，因爲使用float: right也使我的列表項目出現在相反的順序！

Answer 1

像懸崖提到的，你需要漂浮左img或錨點。

http://jsfiddle.net/scottmey/BKWrR/

#nav a, #nav img { 
    float:left; 
} 

，並考慮：

#nav ul { 
    float: right; 
} 

Answer 2

這將做到這一點：

#nav img {float:left;} 

Answer 3

嘗試<ul style="display:inline;">

Answer 4

jsfiddle

HTML

<nav id="nav"> 

    <ul> 
     <a href="index.html"><img src="logo.png" id="logo"/></a> 
    <li><a href="features.html">Features</a></li> 
    <li><a href="pricing.html">Pricing</a></li> 
    <li><a href="signup.html">Sign up</a></li> 
    <li><a href="login.html">Login</a></li> 
    </ul> 
</nav> 

和CSS

* { 
    padding:0px; 
    margin:0px; 
} 


ul li{ 
    display: inline; 
    float: right; 
} 
li { 
    list-style-type: none; 
    background:gold; 
    width:80px; 
    border:1px solid black; 
    text-align:center; 
} 

#nav {padding-top: 30px;} 

你可以改變顏色和其他所有你喜歡的東西！

Answer 5

<nav id="nav"> 
    <a href="index.html"><img style="float:left" src="logo.png" id="logo"></a> 
    <ul> 
    <li><a href="features.html">Features</a></li> 
    <li><a href="pricing.html">Pricing</a></li> 
    <li><a href="signup.html">Sign up</a></li> 
    <li><a href="login.html">Login</a></li> 
    </ul> 
</nav>