我的css和html是这样的:
#TopBar{
display: flex;
justify-content: space-between;
z-index: 1;
position: fixed;
top: 0px;
left: 0px;
background-color: rgb(25,25,25);
height:115px;
width: 2000px;
}
#Logo{
top: 0px;
height: 110px; width: 110px;
display: inline-block;
z-index: 2;
background-size: contain;
}
.NavList{
color: grey;
text-decoration: none;
font-family: Arial;
font-size: 30px;
margin-top: 1.3%;
z-index: 3;
}
<div id = TopBar>
<ul style = "list-style-type:none;">
<a class = NavList id = NavHome href = "../index.html">HOME</a>
<a class = NavList id = NavLogin href = "AccountPage.html" onclick =
"account()">ACCOUNT</a>
<a class = NavList id = NavAccount href = "../Rules
Page/Rules.html">RULES</a>
<a class = NavList id = NavDark href = "FillerPage.html">LIGHT</a>
</ul>
</div>
<a href="https://google.com"><img src="../Images/VenomLogo5.png" id = "Logo">
</img></a>
</div>
</head>
每当我添加flex或任何其他东西随着它像证明内容它不做任何事情，我不知道我做错了什么。我觉得这很简单，但是我想不出来。提前感谢!
看看这是不是你想要的。需要在"ul"中设置width，并将其设置为柔性容器。然后可以添加space-between。
对于css部分，我使用SCSS，以便您可以编写嵌套css。