我正试图将列表设置为在div中向右浮动，但这不起作用。下面是html代码,
<div class="topdiv">
<header>MakeItWork</header>
<ul class="navigation">
<li>Home</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
这是我正在努力使它工作的css
.topdiv{
width: 100%;
overflow: hidden;
background-color: black;
color: white;
display: flex;
}
.topdiv header{
margin-top: auto;
margin-bottom: auto;
font-size: xxx-large;
margin-left: 5%;
}
.navigation{
text-decoration: none;
margin: none;
padding: none;
float: right;
}
.navigation li{
padding: 10px;
}
编辑：我的意图是将标题文本（MakeItWork）保持在页面的左侧，而列表（包含home、content和shop作为列表项）保持在页面的右侧
将float:right添加到.navigation li并将justify-content:space-between添加到.topdiv以对齐标题和列表以及不同的结尾。
注意：我希望你是在做一个导航菜单。因此，我进一步将列表样式:none规则添加到.navigation中。请考虑这是我添加的一个额外规则。
null
.topdiv{
width: 100%;
overflow: hidden;
background-color: black;
color: white;
display: flex;
justify-content: space-between;
}
.topdiv header{
margin-top: auto;
margin-bottom: auto;
font-size: xxx-large;
margin-left: 5%;
}
.navigation{
text-decoration: none;
margin: none;
padding: none;
float: right;
list-style: none;
}
.navigation li{
padding: 10px;
float: right;
}<div class="topdiv">
<header>MakeItWork</header>
<ul class="navigation">
<li>Home</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>