gpt4 book ai didi

html - 页脚栏格式不正确

转载 作者:太空宇宙 更新时间:2023-11-04 11:29:14 25 4
gpt4 key购买 nike

所以我被页脚阻碍了。在这个早期阶段,我试图让所有页脚沿着页面底部移动,但我没有运气(请参阅本文底部的 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 你的解决方案

Updated DEMO jsfiddle

关于html - 页脚栏格式不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32152676/

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