我是编码新手，正在制作一个网站。但是我有一个问题，它不能让它居中。我不希望它是全宽的，而是像盒子一样有点偏边。如您所见，右边的边距比左边多，这怎么可能？它是一个错误还是我需要添加的东西才能正常工作？希望你能帮助我!这是代码:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: rgb(57, 57, 57);
}
header {
background-color: white;
}
header::after {
content: " ";
display: table;
clear: both;
}
.container {
width: 95%;
margin: 0 auto;
}
.logo {
float: left;
width: 250px;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
}
nav {
float: right;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav ul li {
display: inline-block;
margin-left: 45px;
}
nav ul li a {
display: block;
color: black;
text-decoration: none;
padding: 17px 15px;
position: relative;
}
nav ul li a:before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav ul li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style>
</head>
<body>
<header>
<div class="container">
<img class="logo" src="#">
<nav>
<ul>
<li><a href="#">PROJECTEN</a></li>
<li><a href="#">OVER</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
最佳答案
通常我们使用 margin: 0 auto 来居中。尝试将其添加到您的 nav 样式中。
要将导航元素拉到右边，我会尝试使用 flexbox ( a great thing to learn if you're new to HTML/CSS )。
这是最终的 CSS:
nav {
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: row-reverse;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
关于HTML 导航栏不居中，右侧有更多边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45574545/