如何在 CSS 中对齐导航栏的某些元素？

Question

我正在使用 HTML 和 CSS 制作导航栏。 我有 3 个元素：2 个 a-href 和 1 个按钮

HTML：

  <nav>
    <ul>
      <li>
        <a href="/signin">Home</a>
      </li>
      <li>
        <a href="/games">Games</a>
      </li>
      <button class="btn-item btn-ghost red secundary round">
        Sign Out
      </button>
    </ul>
    <div class="hide"><i class="fa fa-bars" aria-hidden="true"></i> Menu</div>
  </nav>

我有这些风格：

CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: monospace;
  font-size: 20px;
}

nav ul {
  list-style: none;
  background: black;
  text-align: left;
}


nav ul li {
  display: inline-block;
  padding: 20px;
  transition: all ease-in-out 250ms;
}

ul li a {
  color: white;
  text-decoration: none;
}

nav ul li:hover {
  background: red;
}

特别是这个块：

nav ul {
  list-style: none;
  background: black;
  text-align: left;
}

在 text-align: left 属性中，它负责对齐导航栏的所有元素，问题是我希望 a href 居中对齐，按钮居右对齐。 我怎样才能做到这一点？

Answer 1

Try this:

`nav ul {
          list-style: none;
          background: black;
          text-align: center;
        }`

几乎只是将文本对齐到中心而不是左对齐，这就是结果。

Answer 2

抱歉回复晚了，补充一下

button{
  float: right;
  margin-top:15px;
} 

我正在使用代码笔，因此您可能需要调整边距顶部以适合您拥有的任何视图。 如果您有任何其他问题，请告诉我。

Answer 3

试试这个。 使 nav 标签成为主容器而不是 ul，并做了一些其他的事情。

 * { margin: 0; padding: 0; box-sizing: border-box; font-family: monospace; font-size: 20px; } nav { background: black; width: 100vw; height: 100px; display: flex; justify-content: center; align-items: center; } nav ul { list-style: none; display: flex; justify-content: center; align-items: center; width: 90%; } nav ul li { display: inline-block; padding: 20px; transition: all ease-in-out 250ms; } ul li a { color: white; text-decoration: none; } nav ul li:hover { background: red; }

 <nav> <ul> <li> <a href="/signin">Home</a> </li> <li> <a href="/games">Games</a> </li> </ul> <button id="myButton" class="btn-item btn-ghost red secundary round"> Sign Out </button> <!-- <div class="hide"><i class="fa fa-bars" aria-hidden="true"></i> Menu</div> --> </nav>