html - 为什么我的链接没有居中？（在菜单栏中）

问题描述

当我单击菜单栏.links时未正确居中。我不知道为什么会发生以及在哪里发生。我什至检查了代码但不明白。请解释我的代码有什么问题。我很困惑，所以我决定不再尝试。

* {
    padding: 0;
    margin: 0;
}
.nav_bar {
    background: gray;
    display: flex;
}
.links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 5%;
}

li {
    list-style: none;
    padding: 0 5% 0 5%;
    margin-right: 5%;
}
.txt {
    margin-right: auto;
    font-size: calc(2vw + 1.6rem);
    padding: 0 5% 0 5%;
}
a {
    text-decoration: none;
    color: black;
}

/* hamburger */

#toggle {
    display: none;
  }

  label {
    font-size: 32px;
    display: none;
    position: absolute;
    right: 5%;
  }

@media (max-width: 1000px)
{
    li {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    label {
        display: block;
        cursor: pointer;
      }
    .links {
        display: none;
        margin-top: 7vh;
        width: 100%;
        text-align: center;
    }
    .links a {
        font-size: 23px;
        text-decoration: none;
        color: rgb(102, 123, 145);
        line-height: 50px;
        font-weight: 500;
        color: white;
    }
    #toggle:checked + .links {
        display: block;
        animation: links 1s forwards;
    }
    @keyframes links {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0);
        }
    }
}

<nav class="nav_bar">
        <div class="txt">LOGO</div>
      <label for="toggle">&#9776;</label>
      <input type="checkbox" class="toggle" id="toggle" />
      <!-- <div class="txt">LOGO</div> -->
      <div class="links">
        <!-- <div class="txt">LOGO</div> -->
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </div>
    </nav>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic odit libero aut blanditiis at iste nihil nesciunt cupiditate enim. Accusamus, facere enim alias libero necessitatibus magni? Delectus nostrum ullam vero ratione quasi quae a aspernatur! Fugiat voluptatum, quis adipisci laboriosam temporibus tempore animi nobis omnis porro ducimus maxime officia sed ipsum sit perspiciatis reiciendis, ad, natus vel repudiandae? Praesentium ut doloremque inventore quo necessitatibus labore dicta magni at rem doloribus possimus aspernatur alias corporis voluptates cumque dolorum, nesciunt delectus magnam blanditiis sed exercitationem cum. Maiores velit quos magni veritatis exercitationem nesciunt repellat libero voluptates dicta eum eius tempora, unde

标签： htmlcss

html - 为什么我的链接没有居中？（在菜单栏中）

问题描述

解决方案

推荐阅读