垂直对齐柔性盒和弯曲方向：列

Question

目前我的HTML显示如下：


我希望它显示如下：

按钮需要使用flex-box与文本垂直对齐，或其他不需要填充，边距（边距：自动正常）或偏移的方法。

http://codepen.io/simply-simpy/pen/vKpAYN

HTML ：

<ul class="nav">
  <li><a href="/about.html">about</a>
    <button>+</button>
      <ul>
        <li><a href="/level-2.html">Level 2 nav item</a>
            <button>+</button>
            <ul>
                <li><a href="/level-3.html">Level 3 nav item</a></li>
                <li><a href="/level-3.html">Level 3 nav item</a></li>
                <li><a href="/level-3.html">Level 3 nav item</a></li>
            </ul>
        </li>
    </ul>
  </li>
</ul>

CSS

 .nav {
    width: 300px;
  }
  button {
    display: inline-block;
    width: 25px;
    height: 25px;
    align-self: flex-end;
  }
  ul {
    list-style-type: none;
  }
  ul > ul li{
    padding-left: 20px;
  }
  ul > ul > ul li {
    padding-left: 40px;
  }
  li {
    display: flex;
    flex-direction: column;
    line-height: 3;
  }
  a {
    border-top: 1px solid black;
  }

Answer 1

您可以将button和a分组到一个div中，并使用display: flex上的align-items: center .nav { width: 300px; } button { width: 25px; height: 25px; } ul { list-style-type: none; } ul > ul li { padding-left: 20px; } ul > ul > ul li { padding-left: 40px; } li { width: 100%; border-top: 1px solid black; } a { padding: 20px 0; display: block; } div { display: flex; align-items: center; justify-content: space-between; }来垂直居中项目。

<ul class="nav">
  <li>
    <div>
      <a href="/about.html">about</a>
      <button>+</button>
    </div>
    <ul>
      <li>
        <div>
          <a href="/level-2.html">Level 2 nav item</a>
          <button>+</button>
        </div>
        <ul>
          <li><a href="/level-3.html">Level 3 nav item</a>
          </li>
          <li><a href="/level-3.html">Level 3 nav item</a>
          </li>
          <li><a href="/level-3.html">Level 3 nav item</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

p4 fstat my-file