gpt4 book ai didi

html - 导航栏不是全宽

转载 作者:行者123 更新时间:2023-11-28 07:15:00 25 4
gpt4 key购买 nike

我正在构建我自己的投资组合/公司网站,我的代码在下面我试图让它全宽但它没有全宽。我正在用 html5 和 css3 编写代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TECH-EXPERTS</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>

<header>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Our Work</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

</header>

</body>
</html>

nav{
background-color: black;
border-radius: 5px;
display: block;
overflow: hidden;
width: 90%;
}

nav ul {
margin: 0;
padding: 0;
float: right;
}

nav ul li {
display: inline-block;
list-style-type: none;
}

nav ul li a {
color: red;
display: block;
line-height: 56px;
padding: 0 24px;
text-decoration: none;
}

nav a:hover{
color: blue;
}

最佳答案

首先,假设您希望导航栏横跨窗口的整个宽度,您需要确保删除放置在 body 元素上的默认边距(如果您没有使用某种已经处理过的 css 重置)。

尝试:

body {
margin: 0;
}

现在删除导航栏上的 width: 90%;。这应该会让您指明正确的方向。

Here's a Codepen的行动。

关于html - 导航栏不是全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32408860/

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