水平<li>中的垂直<ul>

Question

我想使用ul标记将屏幕分成三列，我想在第一列中包含一个普通（垂直）列表。我尝试了这个，但它不起作用：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

你可以使用，

#content_seperator{
  display: block;
}
#content_seperator li{
  display: inline-block;
  vertical-align: top;
}
#content_seperator li ul li{
  display: block;
}

你可以为＆＃39; li＆＃39;通过使用类。