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

我有一个使用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中执行此操作？
谢谢!

最佳答案

您可以使用display: flex

.list-inline {
  display: flex;
}

.list-inline li {
  flex: 1;

  text-align: center;
}

关于css - 通过CSS均匀划分剩余空间的水平列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32140607/