所以，我正在制作一个网站，在导航栏中，我将一些链接浮动到右侧。然而，当我这样做时，链接会离开垂直中心并向下下降。不过，当我使用填充时，什么也不会发生。我知道这个问题在Stack Overflow上还有其他版本，但我尝试过答案，但都不起作用。这是我的代码
/* Start Variables */
:root {
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper {
width: 100%;
padding: 2% 10%;
box-shadow: 5px 10px 8px #888888;
}
.leftside {}
.rightside {
float: right;
}
.options {
text-decoration: none;
margin-bottom: 20%;
}
.linkhome {
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-bottom: 20%;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Example | Home</title>
<link rel="stylesheet" href="/css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Navbar -->
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
<a href="#" class="linkhome">Home</a>
<a href="#" class="linkwork">Our Work</a>
<a href="#" class="linkabout">About Us</a>
<a href="#" class="linkfood">Our Food</a>
<a href="#" class="linkculture">Culture</a>
</div>
</div>
</div>
</nav>
<!-- End Navbar -->
</body>
</html>非常感谢任何帮助
谢谢！
使您的.navbar-wrapper成为一个灵活的盒子。
.navbar-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}