html - 在 ul 上使用 flexbox（彼此相邻）

Question

我正在尝试在我的身上使用 flexbox，<ul>这样我就可以将它们彼此对齐。当我display:flex; flex-direction: row;在我的身上使用它时，<ul>它也会影响孩子（在这种情况下，所有的<li>）

我也试着给<li>a display:flex;，flex-direction: column;但这没有帮助。

我怎样才能在这里实现我想要做的事情？查看我的jsFiddle进行演示。

标签： htmlcssflexboxhtml-lists

Answer 1

如果您希望每个都<ul>显示为彼此相邻的列，则可以将所有内容包装<ul>在 div 中，如下所示：

div {
  display: flex;
}

ul {
  display: flex;
  flex-direction: column;
}

<div>
  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
  </ul>
  <ul>
    <li>Best 1</li>
    <li>Best 2</li>
    <li>Best 3</li>
  </ul>
</div>