如何在ul内垂直对齐按钮？

Question

我有一个<ul>的导航栏，其中包含一些按钮。如何将这些按钮垂直放在<ul>内？ 他们现在已经坚持到了顶峰

请展开整页摘录。

＆＃13;

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="collapse navbar-collapse" id="app-navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
      <li>
        <div class="col-xs-3"><button type="button" class="btn" data-toggle="modal" data-target="#myModal">Login</button></div>
      </li>

      <li>
        <div class="col-xs-3"><button type="button" class="btn" data-toggle="modal" data-target="#myModal">Register</button></div>
      </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

CodePen

Answer 1

将它们放在同一个列表项中：

<div class="container">
  <div class="collapse navbar-collapse" id="app-navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
      <li>
        <div class="col-xs-3">
          <button type="button" class="btn" data-toggle="modal" data-target="#login">Login</button>
          <button type="button" class="btn" data-toggle="modal" data-target="#register">Register</button></div>
      </li>
    </ul>
  </div>
</div>

你必须使它们具有相同的宽度。

https://codepen.io/wazz/pen/WMjMjx