CSS：并排的行<li>？</li>

Question

我正在尝试使用CSS创建一个下拉菜单。

唯一的区别是我需要在一个下拉菜单中并排放置两行不同的子菜单。

为了解释这一点，我附上了一张图片，以便你可以看到我的意思：

有人可以就此提出建议吗？

Answer 1

所以你需要并排放置2个不同的列。这可以通过将列浮动在左侧并向左边的列提供边距来完成。

.col-left{
  width:200px;
  float:left;
  border:1px solid red;
}
.col-right{
  margin-left: 200px;
  width:200px;
  border:1px solid blue;
}

 <div class="col-left">
   <ul class="list">
     <li>first row</li>
     <li>second row</li>
     <li>third row</li>
   </ul>
</div>
<div class="col-right">
  <ul class="list">
    <li>first row</li>
    <li>second row</li>
    <li>third row</li>
  </ul>
</div>