導航欄在底部居中 - CSS

我需要一個快速提示如何管理一些問題。我已經創建了一個導航欄，並將它居中放置，使其位於頁面中間，無論屏幕有多大或多少，但是如何使該欄停留在頁面底部？我知道，當我添加一個height到.MainContainer它將該欄推到底部，但我想使它不受高度的限制。非常感謝您的任何建議！導航欄在底部居中 - CSS

HTML

<html> 
<head> 
</head> 
<body> 
    <div class="MainContainer"> 
    </div> 
    <div id="MenuContainer"> 
     <ul id="navigation"> 
      <li class="x"><a title="1" href="indexX-1.html" >1</a></li> 
      <li class="x"><a title="2" href="#" >2</a></li> 
      <li class="x"><a title="3" href="#" >3</a></li> 
      <li class="x"><a title="4" href="#" >4</a></li> 
      <li class="x"><a title="5" href="#" >5</a></li> 
      <li class="contact" class="last"><a title="6" href="#" >6</a></li> 
     </ul> 
    </div> 
</body> 
</html>

CSS

.MainContainer { 
    width: 1200px; 
    background-color: #0066CC; 
} 
.MenuContainer { 
    height: 70px; 
    bottom:0; 
} 
ul#navigation { 
    height: 70px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    border: 1px solid #ccc; 
    border-width: 1px 0;  
    text-align: center; 
    font-size: 22px; 
    font-family: 'Cham-WebFont', Arial, sans-serif; 
    background-color: #FFF; 
} 
ul#navigation li { 
    display: inline; 
    margin-right: .75em; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
ul#navigation li.last { 
    margin-right: 0; 
}

來源

2013-03-29 d3w00n

不要給你id和class同名。它不會混淆機器，但它會混淆你。 –

是的，你是對的..混淆是我想避免的東西:) – d3w00n

通過使html和bodyheight:100%和應用固定positio寧可導航。

html, body { 
height: 100%; 
} 

ul#navigation { 
position: fixed; 
bottom: 0; 
width: 100%; 
}

這裏是一個的jsfiddle：http://jsfiddle.net/nqKpe/1/
隨意調整窗口的大小，看看你的導航始終保持在底部。

來源

2013-03-29 07:57:40 Bazzz

並以'left：0;正確：0;'。另外，選擇器的「ul」部分不是必需的。該ID已足夠。 – FelipeAls

@FelipeAls居中是通過'width：100％'結合已經存在的OP'text-align：center'完成的。我同意選擇器中的'ul'部分，但是OP已經在那裏，所以爲了清晰起見，我將它留下了。 – Bazzz

非常感謝@Bazzz爲您的時間和支持它解決了我的問題：D -FelipeAls感謝您的建議，我仍然在管理我的代碼:) – d3w00n

這兒有你

工作JSFIDDLE你有一個錯字：

.MenuContainer { 
    height: 70px; 
    bottom:0; 
}

應該是：

#MenuContainer { 
     height: 70px; 
     bottom:0; 
    }

根據你的HTML。還要加position:fixed;：

#MenuContainer { 
      height: 70px; 
      bottom:0; 
      position:fixed; 
     }

來源

2013-03-29 08:02:03 enb081

*更新*評論不再有效。 OP已經改變了HTML。 ---->你提出了一些有效的點，但是這甚至對導航沒有任何作用，並且當然不會按照OP的要求停留在頁面的底部。 – Bazzz

導航欄在底部居中 - CSS

回答

相關問題