窗口大小調整時的中心導航欄？

我的導航欄居中，但是當窗口較小時，它會轉到下一行，而不是縮小到適合窗口大小，我不知道如何解決它。它有下拉的元素。我也會考慮在移動設備上查看垂直列表，但還沒有做媒體查詢。窗口大小調整時的中心導航欄？

這裏是我的HTML：

<nav id="page-navigation"> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
       <ul class="top-menu"> 
        <li><a href="_portfolio/photography.html" onclick="return false">Photography</a> 
        <ul class="sub-menu"> 
         <li><a href="_portfolio/_photography/bmc-himley-mini-show-2015.html">BMC Himley Mini Show 2015</a></li> 
         <li><a href="_portfolio/_photography/kinver-snow.html">Kinver Snow</a></li> 
         <li><a href="_portfolio/_photography/mini-runs-collection.html">"Mini Runs" Collection</a></li> 
         <li><a href="_portfolio/_photography/hofner-bass.html">Hofner Bass</a></li> 
         <li><a href="_portfolio/_photography/nature.html">Nature</a></li> 
         <li><a href="_portfolio/_photography/haynes-motor-museum.html">Haynes Motor Museum</a></li> 
         <li><a href="_portfolio/_photography/miscellaneous.html">Miscellaneous</a></li> 
         <li><a href="_portfolio/_photography/classic-mini.html">Classic Mini</a></li> 
        </ul> 
       </li> 
        <li><a href="_portfolio/graphic-design.html" onclick="return false">Graphic Design</a> 
        <ul class="sub-menu"> 
         <li><a href="_portfolio/_graphic-design/story-bag-artwork.html">"Story Bag" Artwork</a></li> 
         <li><a href="_portfolio/_graphic-design/business-cards.html">Business Cards</a></li> 
         <li><a href="_portfolio/_graphic-design/logo-design.html">Logo Design</a></li> 
         <li><a href="_portfolio/_graphic-design/the-mexican-job.html">"The Mexican Job"</a></li> 
         <li><a href="_portfolio/_graphic-design/magazine-covers.html">Magazine Covers</a></li> 
         <li><a href="_portfolio/_graphic-design/wpap-artwork.html">WPAP Artwork</a></li> 
         <li><a href="_portfolio/_graphic-design/lyric-posters.html">Lyrics Posters</a></li> 
        </ul> 
       </li> 
        <li><a href="_portfolio/3d-modelling.html">3D Modelling</a></li> 
       </ul> 
      <li><a href="about.html">About</a></li> 
      <li><a href="recognition.html">Recognition</a></li> 
     </ul> 
    </nav>

這是我的CSS：

/*navigation*/ 
#page-navigation 
{ 
    width: 60%; 
    height: 53px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 10px; 
} 

#page-navigation ul li 
{ 
    color: white; 
    list-style: none; 
    background-color: darkslategray; 
    width: 9em; 
    float: left; 
} 

li 
{ 
    position: relative; 
} 

li.title 
{ 
    display: none; 
} 

li a 
{ 
    display: block; 
    color: white; 
    line-height: 1.3em; 
    padding: 1em; 
    text-align: center; 
} 

li a:link 
{ 
    text-decoration: none; 
} 

li a:visited 
{ 
    text-decoration: none; 
    color: white; 
} 

li a:hover, .top-menu > li:hover > a 
{ 
    background-color: rgb(48,48,48); 
} 

li a:active 
{ 
    background-color: dimgray; 
} 

ul.sub-menu 
{ 
    width: auto; 
    height: auto; 
    position: absolute; 
    left: -9000em; 
    overflow: hidden; 
} 

ul.sub-menu li 
{ 
    clear: left; 
    float: none; 
    margin-left: -2.5em; 
    z-index: 1000; 
} 

.top-menu li:hover ul 
{ 
    left: 0; 
} 

ul.sub-menu li a 
{ 
    height: auto; 
    border-bottom: 1px solid gray; 
    padding: .4em 1em; 
    background-color: dimgray; 
    padding-top: 1em; 
    padding-bottom: 1em; 
} 

ul.sub-menu li:last-child a 
{ 
    border-bottom: none; 
} 

ul.sub-menu li a:hover 
{ 
    background-color: darkslategray; 
} 

ul.sub-menu li a:active 
{ 
    background-color: gray; 
}

謝謝。

來源

2015-09-07 Macast

擁抱媒體查詢它只是css –

你的菜單被指定爲60％的可變寬度：

#page-navigation 
{ 
    width: 60%; 
    ... 
}

這將導致條的寬度與窗口成比例的，並影響其內的元件的位置。爲了防止這種情況，指定一個靜態的寬度，如：

#page-navigation 
{ 
    width: 1000px; 
    ... 
}

來源

2015-09-07 16:34:40

我只是插入一個一行代碼，我認爲如果調整屏幕有它看起來相當不錯，現在:)

ul.top-menu{ 
    padding: 0; 
}

是在導航（下一行）前的一個小空間，這解決了這個問題。

參見分辨率上jsfiddle。

來源

2015-09-07 16:48:47

答：

因爲你的HTML文件的結構方式，它不可能讓你得到下列原因預期的效果：

你必須直接嵌套的無序列表在另一個無序列表中（1）認爲不正確（see this discussion）;但更重要的是，雖然看起來您的導航有6個頂級項目，但您真的只有4個。因此，無論您使用什麼CSS，它都無法工作。

建議：

僅使用頂部導航項目，並適當巢您的導航項目的正確類修正你的HTML文檔的結構，第一個*
我。會建議重組您的信息架構以在菜單上包含較少的導航項目。例如，識別將有意義進入「關於」頁面。如果這是一個投資組合類型的網站，將您的攝影，平面設計和3D建模合併到項目中將會很好。如果您擔心分離問題，那麼會在頁面內發生子導航。
如果您設定保持導航結構，建議您將菜單摺疊到移動設備上的選擇菜單或漢堡包菜單中，因爲導航所消耗的大塊人的移動設備屏幕並不是一個好體驗爲您的用戶。最重要的是，你必須考慮到用戶不能在移動設備上「懸停」，而且這些下拉菜單的大小很難完全導航。

*解決方案：Demo

HTML（固定）：

<nav id="page-navigation"> 
    <ul> 
    <li><a href="../../index.html" title="Home">Home</a></li> 
    <li class="top-menu"><a href="../../_portfolio/photography.html" onclick="return false">Photography</a> 
     <ul class="sub-menu"> 
     <li><a href="../../_portfolio/_photography/bmc-himley-mini-show-2015.html">BMC Himley Mini Show 2015</a></li> 
     <li><a href="../../_portfolio/_photography/kinver-snow.html">Kinver Snow</a></li> 
     <li><a href="../../_portfolio/_photography/mini-runs-collection.html">"Mini Runs" Collection</a></li> 
     <li><a href="../../_portfolio/_photography/hofner-bass.html">Hofner Bass</a></li> 
     <li><a href="../../_portfolio/_photography/nature.html">Nature</a></li> 
     <li><a href="../../_portfolio/_photography/haynes-motor-museum.html">Haynes Motor Museum</a></li> 
     <li><a href="../../_portfolio/_photography/miscellaneous.html">Miscellaneous</a></li> 
     <li><a href="../../_portfolio/_photography/classic-mini.html">Classic Mini</a></li> 
     </ul> 
    </li> 
    <li class="top-menu"><a href="../../_portfolio/graphic-design.html" onclick="return false">Graphic Design</a> 
     <ul class="sub-menu"> 
     <li><a href="../../_portfolio/_graphic-design/story-bag-artwork.html">"Story Bag" Artwork</a></li> 
     <li><a href="../../_portfolio/_graphic-design/business-cards.html">Business Cards</a></li> 
     <li><a href="../../_portfolio/_graphic-design/logo-design.html">Logo Design</a></li> 
     <li><a href="../../_portfolio/_graphic-design/the-mexican-job.html">"The Mexican Job"</a></li> 
     <li><a href="../../_portfolio/_graphic-design/magazine-covers.html">Magazine Covers</a></li> 
     <li><a href="../../_portfolio/_graphic-design/wpap-artwork.html">WPAP Artwork</a></li> 
     <li><a href="../../_portfolio/_graphic-design/lyric-posters.html">Lyrics Posters</a></li> 
     </ul> 
    </li> 
    <li><a href="../../_portfolio/3d-modelling.html">3D Modelling</a></li> 
    <li><a href="../../about.html">About</a></li> 
    <li><a href="../../recognition.html">Recognition</a></li> 
    </ul> 
</nav>

CSS（固定和更新）：

/*navigation*/ 

#page-navigation { 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 10px; 
} 

#page-navigation ul { 
    text-align: center; 
} 

#page-navigation ul li { 
    color: white; 
    list-style: none; 
    background-color: darkslategray; 
    width: 9em; 
    /* float: left removes any possibility of it centering */ 
    display: inline-block; 
} 

li { 
    position: relative; 
} 

li.title { 
    display: none; 
} 

li a { 
    display: block; 
    color: white; 
    line-height: 1.3em; 
    padding: 1em; 
    text-align: center; 
} 

li a:link { 
    text-decoration: none; 
} 

li a:visited { 
    text-decoration: none; 
    color: white; 
} 

li a:hover, 
.top-menu > li:hover > a { 
    background-color: rgb(48, 48, 48); 
} 

li a:active { 
    background-color: dimgray; 
} 

ul.sub-menu { 
    width: auto; 
    height: auto; 
    position: absolute; 
    left: -9000em; 
    overflow: hidden; 
} 

ul.sub-menu li { 
    clear: left; 
    float: none; 
    margin-left: -2.5em; 
    z-index: 1000; 
} 

.top-menu:hover ul { 
    left: 0; 
} 

ul.sub-menu li a { 
    height: auto; 
    border-bottom: 1px solid gray; 
    padding: .4em 1em; 
    background-color: dimgray; 
    padding-top: 1em; 
    padding-bottom: 1em; 
} 

ul.sub-menu li:last-child a { 
    border-bottom: none; 
} 

ul.sub-menu li a:hover { 
    background-color: darkslategray; 
} 

ul.sub-menu li a:active { 
    background-color: gray; 
} 

ul.top-menu { 
    padding: 0; 
}

還有一些小的花式到調整，但這應該根據你的需要得到你想要的Stion的。

來源

2015-09-08 13:18:37 BenCodeZen

窗口大小調整時的中心導航欄？

回答

相關問題