gpt4 book ai didi

css - 位置固定,不服从最大宽度容器父级

转载 作者:行者123 更新时间:2023-11-28 05:10:43 26 4
gpt4 key购买 nike

我正在尝试制作水平导航栏,现在我的 div 导航栏不使用 max-width: 1200px,它设置在 <body> 上所以我的无序列表不会 float 到屏幕右侧。添加 width: 100% 或 inherit 对导航没有帮助,宽度 100% 比我的最大宽度大得多。

body {
margin: 0 auto;
max-width: 1200px;
font-family: Helvetica, Arial;
background-color: #F7F7F7;
}
#wrapper {
position: relative;
z-index: 0;
margin: 1% 4% 2%;
padding: 1rem;
}
#navigation {
position: fixed;
}
#navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navigation li {
float: right;
}
<div id="wrapper">
<div id="navigation">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Projects</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
</div>

最佳答案

我将您的最大宽度移动到您的#navigation 元素,并将其设置为 100% 宽度。此外,我将您的填充向下移动到您的 ul 元素。

这是更新的 fiddle .

#navigation {
position: fixed;
max-width:1200px;
width:100%;
border: 1px solid red;
}

#navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
padding: 1rem;
}

我想也许固定的位置让div忽略了父元素的最大宽度

关于css - 位置固定,不服从最大宽度容器父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39580707/

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