将<li>放在菜单的底部

Question

我有一个菜单，其中有两个<li>标签，＆＃34;登录＆＃34;和＆＃34;注册＆＃34;：

我想把它们放在最底层。

菜单的代码在哪里。

＆＃13;

＆＃13;

<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
  <ul class="sidebar-nav">
    <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
    <li class="sidebar-brand"><a href="#top" onclick=$("#menu-close").click();>A Dog O</a></li>
    <li><a href="#top" onclick=$("#menu-close").click();>Home</a></li>
    <li><a href="#sobre" onclick=$("#menu-close").click();>Sobre</a></li>
    <li class="dropdown" runat="server">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" runat="server">Serviços<span id="Span1" class="caret" runat="server"></span>
      </a>
      <ul class="dropdown-menu" data-dropdown-in="fadeInUp" data-dropdown-out="fadeOutDown">
        <li><a href="#">Saúde</a></li>
        <li><a href="#">Escola</a></li>
        <li><a href="#">Qql coisa</a></li>
        <li><a href="#">Coisa qql</a></li>
      </ul>
    </li>
    <li><a href="#portfolio" onclick=$("#menu-close").click();>Portfolio</a></li>
    <li><a href="#contact" onclick=$("#menu-close").click();>Contactos</a></li>
    <li><a href="login.aspx" onclick=$("#menu-close").click();>LogIn</a></li>
    <li><a href="signup.aspx" onclick=$("#menu-close").click();>Registar</a></li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为这更简单！

<li style="position: absolute;margin-top: <margin that u want>;width: 100%;"> <a href="login.aspx" onclick = $("#menu-close").click();>LogIn</a> <a href="signup.aspx" onclick = $("#menu-close").click(); $('#signupbox').show()>Registar</a> </li>

问候！

Answer 2

您可以使用flex创建该列flex-direction: column，然后将所需的按钮包含在margin-top: auto元素的底部，将其移到底部。

* {
  margin: 0; padding: 0; box-sizing: border-box;
}
.sidebar-nav {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.loginSignup {
  margin-top: auto;
}

<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
  <ul class="sidebar-nav">
    <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
    <li class="sidebar-brand">
      <a href="#top" onclick=$ ( "#menu-close").click();>A Dog O</a>
    </li>
    <li>
      <a href="#top" onclick=$ ( "#menu-close").click();>Home</a>

    </li>
    <li>
      <a href="#sobre" onclick=$ ( "#menu-close").click();>Sobre</a>
    </li>
    <li class="dropdown" runat="server"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" runat="server">Serviços<span
                        id="Span1" class="caret" runat="server"></span></a>
      <ul class="dropdown-menu" data-dropdown-in="fadeInUp" data-dropdown-out="fadeOutDown">
        <li><a href="#">Saúde</a></li>
        <li><a href="#">Escola</a></li>
        <li><a href="#">Qql coisa</a></li>
        <li><a href="#">Coisa qql</a></li>
      </ul>
    </li>
    <li>
      <a href="#portfolio" onclick=$ ( "#menu-close").click();>Portfolio</a>

    </li>
    <li>
      <a href="#contact" onclick=$ ( "#menu-close").click();>Contactos</a>
    </li>

    <li class="loginSignup">
      <a href="login.aspx" onclick=$ ( "#menu-close").click();>LogIn</a>
      <a href="signup.aspx" onclick=$ ( "#menu-close").click();>Registar</a>

    </li>
  </ul>
</nav>