正确对齐我的页脚的内容

Question

当我向页脚添加更多链接时，布局会扩展，每列的列表集会变得不对齐。

我想确保每列的每个列表集在同一行中水平对齐。例如每列的标题位于同一行

列维 | 使用levi |的法律

下面的图片我的列标题未对齐！ :(。我如何正确对齐它们，以便当我向列表中添加更多内容时，每列中内容的对齐方式保持不变。

这是我希望我的页脚看起来如何的例子。

Here is my jsfiddle of how it is now

这是我的HTML：

tensorboard --logdir=/path_to_dir

Answer 1

使用flexbox是您问题的最佳解决方案。你可以简单地使用它。 codepen中的示例显示了如何制作这样的页脚。在示例中，我使用了flexbox，因为它是最有前途的显示布局方法。 flexbox中的大多数现代浏览器都支持许多规则。利用它，简单地做任何你想要的。一切顺利

HTML代码： -

<div class='container'>
  <ul class="list">
    <li class="list-heading">One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>six</li>
    <li>Seven</li>
    <li>Eight</li>
  </ul>
  <ul class="list">
    <li class="list-heading">One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
  </ul>
  <ul class="list">
    <li class="list-heading">One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>six</li>
    <li>Seven</li>
    <li>Eight</li>
  </ul>
</div>

CSS： -

.container {
  display: flex;
  max-width: 600px;
  border: 1px solid #ddd;
}
.list {
  flex-grow: 1;
  padding-left: 20px;
  list-style: none;
  border-left: 1px solid #ddd;
}
.list-heading {
  font-size: 18px;
  font-weight: bold;
}