導航欄和徽標在同一行嗎？

如何讓導航欄出現在徽標旁邊，而不是打開它下面的下一行？我已經嘗試了幾次更改，但它一直持續到下一行。我試圖避免使用花車，因爲我被告知他們不好使用。我希望它看起來像這個網站上的導航欄在這一端： http://www.freecsstemplates.org/導航欄和徽標在同一行嗎？

我想了解它是如何在該網站上完成的。

我對這個過程如何工作只是非常困惑。

CSS：

#header 
{ 
background-image:url('menubg.png'); 
background-repeat:repeat-x; 
} 
#logo 
{ 
display:inline-block; 
} 
#menu ul 
{ 
display:inline-block; 
list-style-type:none; 
padding: 0px; 
margin:0px; 
} 

#menu li 
{ 
display:inline-block; 
margin:0px; 
padding:0px; 
} 

#menu a:link,a:visited 
{ 
display:inline-block; 
text-transform:lowercase; 
width:auto; 
font-weight:bold; 
padding-left:47.5px; 
padding-right:47.5px; 
padding-top:9px; 
padding-bottom:9px; 
text-decoration:none; 
color:#57fafc; 
text-align:center; 
background-color:#62d2d3; 
} 

#menu a:hover,a:active 
{ 
background-color:#7ce5e6; 
}

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="mainstyle.css"> 
<title>Blah</title></head> 
<body> 
<div id="header"> 
<div id="logo"><img src="logo.png" /></div> 
<div id="menu"> 
     <ul> 
     <li><a href="#">Home</a></li><li><a 

href="#">Contact</a></li><li><a href="#">About</a></li><li><a 

href="#">Products</a></li><li><a href="#">Design-a-Tee</a></li><li><a 

href="#">Reviews/Testimonials</a></li> 
     </ul> 
</div> 
</div> 
</body> 
</html>

來源

2014-04-28 bratattack

把標誌'ul'元素中。 – akonsu

我想控制徽標與導航欄其餘部分之間的距離，如果添加它，則只會與其他鏈接對齊，不是嗎？ – bratattack

你可以使用第n個子選擇器來設計第一個li。看到這裏的一個exlanation http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-child – Deano

添加此CSS

#logo { 
    float:left; 
} 
#menu { 
    float:right;  
} 
#header { 
    clear: both; 
    overflow: auto; 
}

來源

2014-04-29 08:21:39

導航欄和徽標在同一行嗎？

回答

相關問題