html - 创建导航栏我在 float 我的链接时遇到问题，但我想是正确的

Question

我想创建一个简单的导航栏，但我不知道我做错了什么。我希望我的链接位于右侧，站点 Logo 位于左侧。

我的链接在左侧，但我想访问我添加的正确站点 float:right;但不起作用。

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

a,
li,
ul {
  text-decoration: none;
  list-style-type: none;
}

.bg-dark {
  background-color: #000;
}

.gyaro-bar {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
}

.gyaro-bar>a.gyaro-brand {
  display: inline-flex;
  font-size: 20px;
  color: red;
  align-items: center;
  justify-content: center;
  float: left;
  margin-left: 15px;
}

.gyaro-bar>ul.gyaro-bar-items {
  display: inline-flex;
  float: right;
}

.gyaro-bar>ul.gyaro-bar-items>li.gyaro-bar-links {}

<nav class="gyaro-bar bg-dark">
  <a href="index.php" class="gyaro-brand">
    GYARO
  </a>
  <ul class="gyaro-bar-items">
    <li class="">
      <a href="index.php" class="">
        Home
      </a>
    </li>
  </ul>
</nav>

Here codepen link

Answer 1

只需使用 justify-content: space-between在 .gyaro-bar元素:

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

a,
li,
ul {
  text-decoration: none;
  list-style-type: none;
}

.bg-dark {
  background-color: #000;
}

.gyaro-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 50px;
}

.gyaro-bar>a.gyaro-brand {
  display: inline-flex;
  font-size: 20px;
  color: red;
  align-items: center;
  justify-content: center;
  float: left;
  margin-left: 15px;
}

.gyaro-bar>ul.gyaro-bar-items {
  display: inline-flex;
  float: right;
}

.gyaro-bar>ul.gyaro-bar-items>li.gyaro-bar-links {}

<nav class="gyaro-bar bg-dark">
  <a href="index.php" class="gyaro-brand">
    GYARO
  </a>
  <ul class="gyaro-bar-items">
    <li class="">
      <a href="index.php" class="">
        Home
      </a>
    </li>
  </ul>
</nav>