感谢您花时间阅读我的问题，我是网络开发新手（几个月后） 我试图让导航相对于左侧定位。我经常遇到这个问题，但无法解决它。
**HTML。 **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Makes Perfect</title>
<link
rel="stylesheet" href="styles.css">
</head>
<body>
<div id="main">
<div id="nav-border">
<nav class="nav-bar">
<ul>
<li><a href="#">Home</li>
<li><a href="#">Contact</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
**CSS **
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#main {
width: 100vw;
height: 100vh;
background-color: rgb(49, 49, 49);
}
nav-bar{
color: white;
}
#nav-border {
background-color: aqua;
border-radius: 10px;
padding: 5px;
}
nav-links {
display: inline;
}
li {
display:inline;
position: relative;
right: 0;
}
a {
text-decoration: none;
}
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: skyblue;
}
我尝试创建一个类来包含导航栏，使其向右对齐。
我也知道如何通过弯曲、绝对定位来做到这一点，但是我不明白为什么它不会相对移动。
您可以使用弹性盒或网格布局来正确移动元素。这些提供了更多的控制，并且总体上更适合手动定位
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#main {
width: 100vw;
height: 100vh;
background-color: rgb(49, 49, 49);
}
.nav-bar {
color: white;
}
#nav-border {
background-color: aqua;
border-radius: 10px;
padding: 5px;
}
.nav-bar ul {
display: flex;
justify-content: flex-start; /* Aligns items to the left */
list-style-type: none;
}
.nav-bar li {
margin-right: 20px; /* Adds space between items */
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: skyblue;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Practice Makes Perfect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="main">
<div id="nav-border">
<nav class="nav-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>