gpt4 book ai didi

html - Bottom align centered-horizo​​ntal list in header div//当div到达chrome顶部时,将非标题div保持在顶部

转载 作者:太空宇宙 更新时间:2023-11-04 12:02:19 24 4
gpt4 key购买 nike

我开始使用我的新 codeacademy 技能创建我的第一个网站。我需要两个元素的帮助,将不胜感激

  1. 底部对齐居中水平列表

    我需要将 ul li 元素放到标题 div 的底部。我曾尝试使用 margin-top 但这会降低我的标题 div,而不仅仅是列表

  2. 将div保持在网页顶部

    当它到达顶部时,我需要在我的网页顶部保留一个 div(即,div 不是标题)。这个div是网页下面的一个较低的iv,最终会是一张图片。我试过 position:fixed,但这不起作用(示例:http://www.stantec.com/)无法找到不使用 jQuery 的方法!!

代码:main.html

<!DOCTYPE html>

<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Home Page</title>
</head>
<body>
<div class="header">

<ul id="headerMenu">
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>

<div id="mainPhoto"> </div>

<div id="mainScrollUp"> </div>


</body>
</html>

这是我的 stylesheet.css

<--stylesheet.css-->
.header {
background-color: white;
font-family: sans-serif;
height: 75px;
width: 100%;
}

#headerMenu {
width: 100%;
text-align: center;
padding: 0;
list-style: none;
color:black;

}

#headerMenu li {
display: inline;
text-align: center;
}

#headerMenu li a {
text-decoration: none;
color: black;
padding: 3rem;
}

#headerMenu li a:hover {
color: lightgray;
}

#mainPhoto {
height: 650px;
width: 100%;
background-color: bisque;

}

#mainScrollUp {
z-index: 1;
height: 1000px;
width: 100%;
background-color: aqua;
clear: both;
}

最佳答案

对于问题 1,将其添加到您的 CSS 中:

.header{
display:table;
}
#headerMenu{
display:table-cell;
vertical-align:bottom;
}

对于问题 2,我需要知道您希望在标题下方的顶部保留哪种颜色的 div。

这是一个示例,但它确实需要 jquery。 DEMO

关于html - Bottom align centered-horizo​​ntal list in header div//当div到达chrome顶部时,将非标题div保持在顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29663959/

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