Html 如何使列表在div中向右浮动

我试图将列表设置为在div中向右浮动，但它不起作用。 下面是html代码

<div class="topdiv">
    <header>MakeItWork</header>
      <ul class="navigation">
        <li>Home</li>
        <li>Shop</li>
        <li>Contact</li>
      </ul>
  </div>

---

编辑：我的意图是将标题文本（MakeItWork）保留在页面的左侧，列表（包含主页、内容和商店作为列表项）保留在页面的右侧。

您可以使用

调整内容：间距
，而
浮动
不适用于
flex


.topdiv{
宽度：100%；
溢出：隐藏；
背景色：黑色；
颜色：白色；
显示器：flex；
调整内容：之间的间距
}
.topdiv标题{
页边顶部：自动；
页边距底部：自动；
字体大小：xxx大号；
左缘：5%；
}
.导航{
文字装饰：无；
保证金：无；
填充：无；
}
李先生{
填充：10px；
}

使其工作

家
商店
接触

添加
float:right
到
.navigation li
并添加
justify content:space-between
到
.topdiv
以对齐标题和列表以及不同的端点

注意：我希望您正在制作一个导航菜单。因此，我进一步将
列表样式：none
规则添加到
.navigation
。请考虑这是我添加的额外规则。


.topdiv{
宽度：100%；
溢出：隐藏；
背景色：黑色；
颜色：白色；
显示器：flex；
证明内容：之间的空间；
}
.topdiv标题{
页边顶部：自动；
页边距底部：自动；
字体大小：xxx大号；
左缘：5%；
}
.导航{
文字装饰：无；
保证金：无；
填充：无；
浮动：对；
列表样式：无；
}
李先生{
填充：10px；
浮动：对；
}

使其工作

家
商店
接触


.topdiv{
宽度：100%；
背景色：黑色；
颜色：白色；
显示器：flex；
证明内容：之间的空间；
}
.topdiv标题{
字体大小：xxx大号；
}
.导航{
浮动：对；
列表样式：无；
}
李先生{
填充：10px；
浮动：对；
}

使其工作

家
商店
接触

这是您的预期输出吗？而不仅仅是移除显示器：flex

但它不起作用不是一个有用的问题描述。否决票。请提供一个你尝试做什么的例子，或者你必须准确地写下你的期望
.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;
}