拉伸導航欄使用可用空間

我正在使用以下html並使用min-width屬性來確保我的導航欄不會低於某個寬度，否則它將在圖像下方進行換行。您可以通過手動減小瀏覽器窗口的寬度來驗證這一點（請參閱jsfiddle）。拉伸導航欄使用可用空間

#pageHeader {  
    background-size: cover; 
    min-width: 550px; 
} 

<div id="pageHeader"> 
    <img class="myLogo" id="logo" src="http://www.growingvoters.org/images/online-voting-tools.jpg">  

    <div class="mainMenu" id="mainMenu"> 
     <a class="navLink menuItem" href="#">DASHBOARD</a> 
     <a class="navLink menuItem" href="#">NEWS</a> 
     <a class="navLink menuItem" href="#">CONTACT</a> 
     <a class="navLink menuItem" href="#">ABOUT</a> 
     <a class="navLink menuItem" href="#">CAREERS</a> 
    </div> 
</div>

https://jsfiddle.net/mmn24kab/

但有哄導航欄來使用盡可能多的水平房地產作爲的任何方式可當屏幕處於全寬。我覺得這應該很簡單，但似乎無法弄清楚。我確實嘗試過，發現了類似的問題，但沒有運氣。

來源

2015-04-08 dre

你的意思是讓鏈接填充頁面的其餘部分？ [DEMO]（http://jsfiddle.net/jbutler483/ftLhrp9c/）....或者使用定位：[DEMO]（http://jsfiddle.net/jbutler483/ftLhrp9c/1/） – jbutler483

@ jbutler483是的，我認爲上面的第二篇文章與我所尋找的最接近，因爲它保留了這樣一個事實，即當瀏覽器寬度減小時菜單項最終不會換行。但是在FF中支持「calc」表達式嗎？ – dre

[是的，它沒有前綴支持]（http://caniuse.com/#feat=calc）。除非你需要FF 15>支持，你可能需要包含-moz-前綴。至於'舊'webkit瀏覽器，你會更安全地添加webkit前綴。（Chrome 25>） – jbutler483

怎麼樣this：

.mainMenu { 
    height: 30px; 
    padding-top: 55px; 
    overflow: hidden; 
    text-align: right; 
} 
.myLogo{ 
    width:80px; 
    height:80px;  
    float: left; 
}

來源

2015-04-08 10:54:31 Yoink

除非我錯過了某些東西，否則在全屏時（寬度）導航欄仍然主要位於右側，並且不會伸展以填充自身和徽標之間的空間。 – dre

所以你想菜單項傳播出去？以上使菜單欄的寬度填充。如果您想要項目傳播，請參閱@ jbutler483剛發佈的鏈接。 – Yoink

@media (min-width: 700px) { 
.mainMenu { 
    width: 85%; 
} 


.menuItem { 
    margin: 0 2%; 
    white-space: nowrap; 
    } 
}

我把這個在撥弄你的CSS的底部。這是一個media query，在一定寬度後轉換爲百分比。

來源

2015-04-08 11:49:55

曾經想過媒體查詢，但不幸的是，新風格的應用點突然發生。我希望在更改屏幕寬度時能夠獲得平滑，動態的過渡。 – dre

拉伸導航欄使用可用空間

回答

相關問題