Question

我有一个情况，我有一个可变数量的元素2-5，我想在可变宽度div上均匀分布它们。这非常简单，但还有一个额外的转折点。我想将每个元素之间的水平空间限制为最大值。因此，如果div真的很宽，并且只有少数元素，我不想在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/

这是正确的轨道，但不是很正确。元素之间的空间受到适当限制，但它们不会保持居中。此外，我必须手动指定各种li的宽度为20％，33％和50％。如果这是自动的话会很棒。

我并不反对使用JavaScript来帮助解决这个问题，但只有CSS的解决方案才是理想的选择。

Answer 1

你可以尝试灵活的盒子：

.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>

Answer 2

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%;
}

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

2 个答案: