导航栏在底部居中 - 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

回答

相关问题