gpt4 book ai didi

html - 底部的导航栏,居中 - CSS

转载 作者:可可西里 更新时间:2023-11-01 13:13:26 25 4
gpt4 key购买 nike

我需要一个快速提示如何处理一些问题。我创建了一个导航栏并将其居中,所以现在无论屏幕有多大或多小,它都位于页面中间,但是如何使该导航栏位于页面底部?我知道当我将 height 添加到 .MainContainer 时,它会将该栏推到底部,但我想让它不受恒定高度的影响。非常感谢您的任何建议!


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;
}

最佳答案

通过制作 htmlbody height:100% 并将固定定位应用于您的导航。

html, body {
height: 100%;
}

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

这是一个 jsFiddle:http://jsfiddle.net/nqKpe/1/
随意调整窗口大小,您的导航始终保持在底部。

关于html - 底部的导航栏,居中 - CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15699459/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com