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

Question

我正试图将列表设置为在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作为列表项）保持在页面的右侧

Answer 1

将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>