如何对齐导航栏css

Question

.home {
  background: transparent;
  border: 1px solid #fff;
  border-color: #fff;
  border-radius: 10px;
  font-weight: 700;
  padding: 14px 36px;
  margin-top: 200px;
  margin-right: 5px;
}

-

<nav>
    <ul>
        <li class="home"><a href="#">Home</a></li>
        <li class="home"><a href="#">About</a></li>
        <li class="home"><a href="#">Projects</a></li>
    <ul>
</nav>

我提供了 HTML 和 CSS 代码

网站如下：http://prntscr.com/im5t4e

如何将3个按钮置于中间位置？

Answer 1

当您尝试将元素置于容器内部时，最好的方法是使用 Flexbox ，因为您可以轻松地将项目放在行或列中，更改其顺序等等。在这种特殊情况下，您应该尝试将justify-content属性与 center 值一起使用。最后，为display: inline元素提供li属性，以便它们显示为内联元素而不是块类型元素。

示例：

<强> CSS

nav {
  display: flex;
  justify-content: center;
}

li {
  display: inline;
}

<强> HTML

<nav>
  <ul>
    <li class="home"><a href="#">Home</a></li>
    <li class="home"><a href="#">About</a></li>
    <li class="home"><a href="#">Projects</a></li>
  <ul>
</nav>