gpt4 book ai didi

html - 为什么导航栏不会按照指示划到 100% 宽度?

转载 作者:太空宇宙 更新时间:2023-11-03 23:18:42 24 4
gpt4 key购买 nike

我是 html 样式的新手,我想制作一个像本网站 (stackoverflow.com) 这样的 100% 宽度并位于浏览器顶部的顶部导航栏。这是我尝试过的:

<style>
body{text-align:center;}

.wrapper{width:80%;margin:0 auto;text-align:left;}

.navbar-default {
background-color: #497093;
border-color: #3e5f7d;
}
#nav-bar{
width:100% !important; <-- here I make the nav-bar 100% width.
float:left;
}
</style>

但它仍然会固定为 80% 宽度 :-(

我怎样才能使这项工作? enter image description here

这是html的片段

<body class="wrapper">
<div class="navbar navbar-default navbar-static-top" role="navigation" id="nav-bar">
</div>
...
...
</body>

最佳答案

刚看了图片,正如我的评论所说。您的 nav 位于您的 wrapper 中。将它移到外面,它将成为窗口宽度的 100%。

它是父级(wrapper)的 100%,父级有 80% 的宽度。


编辑

在您的情况下,您在 body 上有一个类,因此任何子元素都将从 80% 的宽度开始缩放。我建议将内容包装在 div 中并将 nav 移到该包装器之外。

body {
margin: 0;
}
.nav {
background: red;
}
.wrapper {
width: 80%;
margin: 0 auto;
background: #999;
}
<div class="nav">We can go 100%!</div>
<div class="wrapper">
Content Here
</div>

关于html - 为什么导航栏不会按照指示划到 100% 宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29532437/

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