我的导航栏链接没有按我想要的方式浮动

Question

我正在开发一个网站。出于某种原因，我的导航栏不太配合。我已经在网站上建立了其他页面的链接，并将它们浮动到右侧。然而，它们似乎并没有像我希望的那样向右移动。如果我使用左右边距，那么当我调整浏览器大小时，它不会做出响应。但是float属性使它保持响应，即使它停留在我的导航中心附近。这是我的代码：

/* 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%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
z-index: 100;
position: relative;
}
.leftside{
float: left;
width: 50%;
}
.rightside{
float: right;
width: 50%;
}
.options{
text-decoration: none;
}
.linkhome{
font-size: 120%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkabout{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkfood{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkculture{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu:hover{
color: var(--aa-color);
}
.linkabout:hover{
color: var(--aa-color);
}
.linkfood:hover{
color: var(--aa-color);
}
.linkculture:hover{
color: var(--aa-color);
}

<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
<a href="#" class="linkhome">Home</a>
<a href="#" class="linkmenu">Menu</a>
<a href="#" class="linkabout">About Us</a>
<a href="#" class="linkfood">Our Food</a>
<a href="#" class="linkculture">Ethiopian Culture</a>
</div>
</div>
</div>
</nav>
```

非常感谢任何帮助

谢谢！

Answer 1

试试这个例子，float不是现代web中布局元素的首选方式。请使用柔性盒；右边宽度的原因是由padding: 2% 10%;引起的，我已经修改了它。

删除视觉背景。

nav{
width:100%;
}
.navbar-wrapper{
background: blue;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
z-index: 100;
position: relative;
}
.leftside{
background: green; 
width: 50%;
height: 10px;
}
.rightside{
width: 50%;
background: red;
}
.options{
background: yellow;
text-decoration: none;
width: 100%;
display: flex;
justify-content: flex-end;
}
.linkhome{
font-size: 120%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkabout{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkfood{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkculture{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu:hover{
color: var(--aa-color);
}
.linkabout:hover{
color: var(--aa-color);
}
.linkfood:hover{
color: var(--aa-color);
}
.linkculture:hover{
color: var(--aa-color);
}

Answer 2

/* 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%; you need to change padding to position to the right correctly */
padding: 20px 10px;; 
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
z-index: 100;
position: relative;
}
/* you don't need float
.leftside{
float: left;
width: 50%;
}
.rightside{
float: right;
width: 50%;
}*/
.rightside{
/*to position your links to the right*/
text-align: right; 
}
.options{
text-decoration: none;
}
.linkhome{
font-size: 120%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
/* if you want all links in one line use inline instead*/
display: inline; 
}
.linkmenu{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkabout{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkfood{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkculture{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkmenu:hover{
color: var(--aa-color);
}
.linkabout:hover{
color: var(--aa-color);
}
.linkfood:hover{
color: var(--aa-color);
}
.linkculture:hover{
color: var(--aa-color);
}

<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
<a href="#" class="linkhome">Home</a>
<a href="#" class="linkmenu">Menu</a>
<a href="#" class="linkabout">About Us</a>
<a href="#" class="linkfood">Our Food</a>
<a href="#" class="linkculture">Ethiopian Culture</a>
</div>
</div>
</div>
</nav>

Answer 3

.options {
text-align: right;
}