調整瀏覽器窗口大小時水平導航欄出錯

我的問題是當我最小化瀏覽器窗口的水平導航欄開始回到垂直導航，我不想這樣做。我嘗試了最小寬度和最大寬度，但它沒有幫助我的問題，否則我只是錯誤地應用它。這是HTML：調整瀏覽器窗口大小時水平導航欄出錯

<html> 
<head><title></title></head> 
<body> 
    <!--Navigation Bar--> 
    <div id="nav" class="nav"> 
    <ul> 
    <li><a href="#">******</a></li> 
    <li><a href="#">*********</a></li> 
    <li><a href="#">****</a></li> 
    <li><a href="#">***********</a></li> 
    <li><a href="#">*********</a></li> 
    </ul> 
    </div> 
    <div id="header"></div> 
    <div id="container"></div> 
</body> 
</html>

我的CSS是：

#nav { 
    position:fixed; 
    text-align:center; 
    width:100%; 
    height:110px; 
} 
#nav ul { 
    list-style: none; 
    display: inline-block; 
    text-align:center; 
    padding-top:10px; 
    font-size:30px; 
    font-weight:bold; 
} 
#nav ul li { 
    float:left; 
    border-radius:10px; 
    display:inline-block; 
} 
#nav ul li:hover { 
    border:2px solid #000000; 
    border-radius:10px; 
    box-shadow:7px 7px 3.5px #000000; 
} 
#nav ul li a { 
    display: block; 
    padding:10px 70px; 
    color: #ff0000; 
    text-decoration: none; 
}

任何一個能幫助我。

來源

2012-11-29 Derek O Brien

使用@media查詢 – Tarun

如果導航應始終處於水平狀態，無論是否使用veiwport，@media查詢都無濟於事。 – spliter

嘗試

#nav { white-space: nowrap; }

，如果你真正想要的是給力的導航是水平的所有時間。

來源

2012-11-29 10:47:48 spliter

謝謝分割器。爲我工作:) –

調整瀏覽器窗口大小時水平導航欄出錯

回答

相關問題