所以我被页脚阻碍了。在这个早期阶段，我试图让所有页脚沿着页面底部移动，但我没有运气(请参阅本文底部的 HTML 代码)。
要在页面顶部和底部制作导航栏，我的 CSS 如下所示:
.header {
height: 30px;
}
.footer {
height: 30px;
position: absolute;
bottom: 0;
}
body {
height: 100%;
margin-bottom: 30px;
}
我的 ul 有这个 CSS，认为它们会排在页面底部:
.posRight li{
display: inline;
float: right;
}
.posLeft li {
float: left;
display: inline;
}
但出于某种原因，第二个 ul(class posRight) 粘在我的拳头 ul 下，我似乎无法移动它，除非我将位置设置为绝对位置，然后手动将其移动到哪个位置至少是凌乱的。
我注意到的另一件事是，如果我将 float: right; 添加到 header 类而不是，我的标题导航栏也有 pos right 类posRight 类使我的中心图像(类 imgP)跳到一侧而不是留在中心？
它由以下 CSS 居中:
.imgP {
height: 231px; //specifying the class here works over specifying it on .logo which stretches it height ways
}
.logo {
width: 269px;
display: block;
margin: 0 auto;
padding-top: 112px;
}
如果有帮助，这是我剩下的 HTML:
<body>
<!-- top navBar -->
<div class="inLine posRight header">
<ul>
<li><a href="#">Images</a></li>
<li><a href="https://mail.google.com/mail/u/0/#inbox">Gmail</a></li>
<li>Anna</li>
</ul>
</div>
<!-- main content: search bar and google button -->
<div id="content" class="mainContent">
<div class="imgP">
<img class="logo" src="images/logo11w.png" alt="logo">
</div>
<form action="#">
<input class="txtBox" type="text" />
<div class="centreB">
<input class="butt" type="submit" name="Google Search" value="Google Search" />
<input class="choose" type="submit" name="Google Search" value="I'm Feeling Lucky" />
</div>
</form>
</div>
<!-- footer navBar -->
<div class="footer">
<ul class="posLeft">
<li><a href="#">Advertising</a></li>
<li><a href="#">Busniness</a></li>
<li><a href="#">About</a></li>
</ul>
<ul class="posRight">
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Settings</a></li>
</ul>
</body>
很抱歉，如果这个问题变得太长了，但是这两件事联系在一起，所以我觉得不值得发两个帖子。
最佳答案
页脚**类如下我想我会为你工作
.footer {
position: fixed; //updated
bottom: 0;
background: #f2f2f2;
border-top: 1px solid #e4e4e4;
line-height: 40px;
min-width: 100%; //updated
width: auto; //updated
}这是有效的 js fiddle 你的解决方案
关于html - 页脚栏格式不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32152676/