html - 水平 中的垂直

Question

我想使用 ul 标记将屏幕分成三列，并且我想在第一列中有一个普通(垂直)列表。我试过这个但它不起作用:

<ul id="content_seperator">
  <li class="content_left">
    <ul id="vertical-nav">
      <li>Menu1</li>
      <li> Menu2 </li>
      <li> Menu3 </li>
      <li> Menu4 </li>
      <li> Menu5 </li>
    </ul>
  </li>
  <li class="content_middle"></li>
  <li class="content_right"></li>
</ul>

Answer 1

试试下面的代码。希望对您有所帮助。

#content_seperator,
  .content_left,
  .content_middle,
  .content_right {
      display: flex;
  }
  .content_left,
  .content_middle,
  .content_right {
      flex: 1 1 0
  }

<ul id="content_seperator">
    <li class="content_left">
        <ul id="vertical-nav">
            <li>Menu1</li>
            <li> Menu2 </li>
            <li> Menu3 </li>
            <li> Menu4 </li>
            <li> Menu5 </li>
        </ul>
    </li>
    <li class="content_middle">Middle</li>
    <li class="content_right">Right</li>
</ul>