导航栏宽度超过网页的视口



大家好,我想在边距为 50px 和 50px 的边距中显示 html 内容。 这是我的导航栏 witdh et 到 100% 的问题,然后它拉长到右端但正确定位在左侧
,我给出了下图:像这样

我展示 HTML 和 CSS

.css:

<style>
.top{
width:100%;
height:300px;
color:#ccc;
font-size: 40px;
text-align: center;
background-color: forestgreen;
}
.align{
height:100%;
margin-left: 50px;
margin-right: 50px;
background-color: darkgray;
}
ul{
position: absolute;
width:100%;
list-style-type: none;
overflow: hidden;
background-color: black;
color: azure;
float:left;
padding: 0;
}
nav{
position: inherit;
}
li{
text-decoration: none;
padding: 14px 16px;
display: block;
float: left;
margin: none;
text-align: center;
}
li.active{
background-color: darkred;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
</style>

.HTML:

<body class="bg-danger">
<div class="align bg-success" >
<div id=image-header class=top>
NO:1 Hosting Site 
</div>
<nav   >
<ul>
<a href="index.php"><li class="active">
Home
</li></a>
<a href="login.php"><li>
Login
</li></a>
<a href="registration.php"><li>
Register
</li></a>
<a href="account.php"><li >           
Profile
</li></a>
</ul>
</nav>
</div>
</body>

我希望它像这样修复它(我使用了 92.5% 的宽度(宽度为 100%,这只是像 bootstrap 中的贴注一样的模型 并想知道为什么不能在div 元素中使用 100% 修复它 图像

您可以使用该导航栏上的width: calc(100% - 100px);来获取正确的宽度。

最新更新