如何相对于导航栏定位导航链接？

Question

我有一个导航栏，我试图根据我的导航栏定位我的导航链接，导航链接应该在导航栏之后开始，与导航栏的底部链接。 这是我想要实现的目标：

我希望红色部分从导航栏的底部开始。 这是我当前的代码：

css

.nav {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  .nav-links {
    flex-direction: column;
    align-self: center;
    position: absolute;
    background-color: red;
    padding: 2rem;
    top: 10rem;
    width: 100%;
  }

  .nav-link {
    padding: 1rem 0;
  }

HTML

<div className='nav'>
      <span className='logo'>Connect.</span>
      <nav className='nav-links'>
        <a href='#' className='nav-link'>Product</a>
        <a href='#' className='nav-link'>Features</a>
        <a href='#' className='nav-link'>Reviews</a>
        <a href='#' className='nav-link'>Pricing</a>
        <a href='#' className='nav-link'>FAQ</a>
        <button className='button'>download</button>
      </nav>
    </div>

Answer 1

我已将 display flex 添加到导航链接本身并对齐项目以居中而不对齐自身。

 .nav { flex-direction: column; align-items: flex-start; position: relative; } .nav-links { display:flex; flex-direction: column; align-items: center; position: absolute; background-color: red; padding: 2rem; top: 10rem; width: 100%; } .nav-links > a{ text-decoration:none; color:white; } .nav-link { padding: 1rem 0; }

 <div class='nav'> <span class='logo'>Connect.</span> <nav class='nav-links'> <a href='#' class='nav-link'>Product</a> <a href='#' class='nav-link'>Features</a> <a href='#' class='nav-link'>Reviews</a> <a href='#' class='nav-link'>Pricing</a> <a href='#' class='nav-link'>FAQ</a> <button class='button'>download</button> </nav> </div>

Answer 2

首先，您正在编写className example: <div className='nav'>这是不正确的将它们替换为class example: <div class='nav'> ，并且您的代码未显示所需的结果。 因此，我编写了一些代码，您可以通过这些代码实现所需的输出，希望这些代码能帮助您实现目标。 此代码肯定可以根据您的需要和愿望进行更多优化，因此请随意更改动态，这只是您如何实现所请求输出的一般概念。

HTML：

<div class='nav'>
    <span class='logo'>Connect.</span>
    <ul>
        <li><a href='#'>Product</a></li>
        <li><a href='#'>Features</a></li>
        <li><a href='#'>Reviews</a></li>
        <li><a href='#'>Pricing</a></li>
        <li><a href='#'>FAQ</a></li>
        <button class='button'>download</button>
    </ul>
</div>

CSS：

   ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 850px;
    width: auto;
    background-color: red;
  }
  
  li a {
    display: flex;
    flex-direction: column;
    color: #000;
    padding: 70px 0;
    text-decoration: none;
    text-align: center;
  }
  
  /* Change the link color on hover */
  li a:hover {
    background-color: transparent;
    color: white;
  }

.button{
    display: flex;
   margin: auto;
   padding: 7px;

}