通过CSS均匀划分剩余空间的水平列表

Question

我有一个使用Bootstrap的Web应用程序.在这个Web应用程序中,我有一个动态创建的项目列表.此处显示了创建的项目的示例:

<ul class="list-inline">
  <li>home</li>
  <li>contact me</li>
  </li>a longer list item</li>
</ul>

当它被渲染时,它是这样的:

+------------------------------------------------+
| +------+------------+--------------------+     |
| | home | contact me | a longer list item |     |
| +------+------------+--------------------+     |
+------------------------------------------------+

但是,我想弄清楚一种方法,使项目填充屏幕的宽度,并均匀分布.换句话说,我有点想要这样:

+-----------------------------------------------------------------------------------+
| +--------------------------+--------------------------+--------------------------+     |
| |           home           |        contact me        |    a longer list item    |     |
| +--------------------------+--------------------------+--------------------------+     |
+-----------------------------------------------------------------------------------+

在上面的示例中,每个项目的宽度相同,文本在每个单元格中居中.我如何在Bootstrap中执行此操作？

谢谢!

Answer 1

您可以使用 display: flex

.list-inline {
  display: flex;
}

.list-inline li {
  flex: 1;

  text-align: center;
}