如何解决使CSS标头块扩展到页面的两端
显示块没有延伸到两端
https://i.stack.imgur.com/RifQD.png
我无法使可点击链接扩展到页面的两端。我尝试了内联块和块显示属性，但似乎没有将可点击链接扩展到页面的两端。我不确定是否需要在其他地方插入其他属性。请参阅下面的HTML和CSS代码。谢谢！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Color Flipper</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav>
<div class="nav-center">
<ul class="nav-links">
<li>
<a href="index.html">Color Flipper</a>
</li>
<li>
<a href="hex.html">Simple Hex</a>
</li>
</ul>
</div>
</nav>
<main>
<div class="container">
<div class="container2"
<h2>background color : <span class="color">
#f1f5f8
</span></h2>
</div>
<button class="btn-hero" id="btn">click me</button>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
nav {
border-bottom: solid black;
}
.nav-center {
display: inline-block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: flex;
justify-content: center;
}
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
解决方法
这是您要尝试执行的操作。您可以在display: flex上使用nav-center，并在space between和ul上使用li
也请考虑使用width: 100% CSS属性不。无需使用float属性，您还有许多其他方法可以完成事情。
实时演示：
floatnav {
border-bottom: solid black;
}
.nav-center {
display: flex;
justify-content: center;
}
li {
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: flex;
width: 100%;
justify-content: space-between;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。