液體標題與導航欄在html中碰撞

我是新來的html & css。我在同一高度上創建了標題和導航欄，但是當我縮小瀏覽器窗口（液體）時，標題和導航欄發生衝突。我怎樣才能解決這個問題？液體標題與導航欄在html中碰撞

這是我的標題和導航的CSS代碼。酒吧：

/*title*/ 
#logo{ 
width: 35%; 
margin-top: 5px; 
font-family: georgia; 
display: inline-block; 
} 

/* nav. bar */ 
#nav{ 
width: 60%; 
display: inline-block; 
text-align: right; 
float: right; 
} 
/* unorded list */ 
#nav ul{} 

#nav ul li{ 
display: inline-block; 
height: 62px; 
} 
/* text*/ 
#nav ul li a{ 
padding: 20px; 
background: orange; 
color: white; 
}

這是html代碼：

<div id="logo"> 
    <h1><a href="../html/index.html" id="logoLink">Baby kleding online</a></h1> 
</div> 
<div id="nav"> 
    <ul> 
     <li><a href="../html/index.html"id="homenav" >Home</a></li> 
     <li><a href="../html/kleding.html"id="kledingnav" >Kleding</a></li> 
     <li><a href="../html/bestel.html" id="bestelnav">Bestellen</a></li> 
     <li><a href="../html/contact.html"id="contactnav">Contact</a></li> 
     <li><a href="../html/vragen.html" id="vragennav">Vragen</a></li> 


    </ul> 
</div>

在此先感謝。

來源

2013-10-16 Thomas Pen

[JSFiddle]（http://jsfiddle.net/TAxuj/）如果有人想要它。 –

瀏覽器窗口足夠大時是否有可能保持nav.bar的水平狀態？ –

你可以在'＃logo'中使用'min-width：350px;'。但是在這種情況下，你必須使導航horizontaly。 http://jsfiddle.net/s2x9x/ –

我的建議是讓您的徽標處於絕對位置，並將導航欄懸浮在其上，並且左邊距與您徽標的寬度相同。

這裏舉例：

http://codepen.io/anon/pen/uvAaJ

如果能擴大與你正在尋找這將有助於...因爲有這麼多的方式來處理這種情況取決於你的行爲你的問題想要（絕對+保證金，媒體查詢，箱子尺寸：邊框......）。

來源

2013-10-16 08:16:19 veksen

液體標題與導航欄在html中碰撞

回答

相關問題