水平分布和居中元素，但在它们之间限制 space

Question

我有这样一种情况，我有可变数量的元素 2-5，我想将它们均匀分布在可变宽度 div 上。这非常简单，但还有一个额外的转折。我想将每个元素之间的水平 space 限制为最大值。所以如果 div 真的很宽并且只有几个元素，我不想 space 它们一直穿过 div。相反，我想 将它们置于 div 中心 。像这样：

Narrow div, 5 elements:
[   1  2  3  4  5  ]
Wide div, 3 elements:
[          1  2  3         ]

这是我目前所拥有的，HTML：

<div id="nav5">
    <ul>
        <li>[1]</li>
        <li>[2]</li>
        <li>[3]</li>
        <li>[4]</li>
        <li>[5]</li>
        <ul>
</div>
<div id="nav3">
    <ul>
        <li>[1]</li>
        <li>[2]</li>
        <li>[3]</li>
        <ul>
</div>
<div id="nav2">
    <ul>
        <li>[1]</li>
        <li>[2]</li>
        <ul>
</div>

CSS:

li {
    float: left;
    font-size: 22px;
    font-weight: bold;
    max-width: 80px;
}
#nav5 li {
    width: 20%;
}
#nav3 li {
    width: 33.333%;
}
#nav2 li {
    width: 50%;
}
ul {
    text-align: center;
    overflow: auto;
    width: 100%;
}
div {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
    background-color: lightgray;
}

小提琴：http://jsfiddle.net/jmy690bq/

方向是对的，但不是很对。元素之间的 space 被适当限制，但它们不会保持居中。此外，我必须手动将各种 li 的宽度指定为 20%、33% 和 50%。要是自动就好了。

我并不反对 JavaScript 来帮助解决这个问题，但纯 CSS 解决方案将是理想的。

Answer 1

li {
    display: inline-block;
    font-size: 22px;
    font-weight: bold;
}

li + li {
    margin-left: 2em; //for example
}

ul {
    text-align: center;
    overflow: auto;
    width: 100%;
}

Answer 2

你可以试试弹性盒子：

.nav {
  display: flex;           /* Magic begins */
  justify-content: center; /* Center children */
}
.nav > li {
  flex-grow: 1;            /* Let them grow if there is free space... */
  max-width: 80px;         /* ...but with this limit */
  text-align: center;      /* Center content */
}

.nav {
  display: flex;
  justify-content: center;
  max-width: 320px;
  background-color: #D3D3D3;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav > li {
  flex-grow: 1;
  max-width: 80px;
  text-align: center;
}

<ul class="nav">
  <li>[1]</li>
  <li>[2]</li>
  <li>[3]</li>
  <li>[4]</li>
  <li>[5]</li>
</ul>
<ul class="nav">
  <li>[1]</li>
  <li>[2]</li>
  <li>[3]</li>
</ul>
<ul class="nav">
  <li>[1]</li>
  <li>[2]</li>
</ul>

水平分布和居中元素，但在它们之间限制 space

Distribute and center elements horizontally but limit space between them

html

css