Html 元素应占据可用的水平空间，并在必要时中断

我有四个按钮a元素，它们应该占据div的整个可用水平空间，中间有一些空白空间。这四个按钮的宽度应该相等，因为它们的内容可能会流动。我目前的做法如下：

css:

html:

页面缩小

+----------------+--+ |[ab][cdef][ghi][jk lm]| |[ ] [ ] [ ] [ ]| 页面进一步缩小，最后一个btn将显示其内容

+--------------+----+ |[ab][cdef][ghi][jk]| |[]米]| 进一步缩小，对于四个btn来说太窄了 第1行有3个btn，全宽，第2行有1个btn，等宽

+------------+------+ |[ab][cdef][ghi]| |[ ] [ ] [ ]| |[jk lm]| |[ ] | 进一步缩小，所有四个btn都缩小了

+----------+-------+ |[ab][cdef][ghi]| |[ ] [ ] [ ]| |[jk]| |[lm]| 进一步缩小，对于三个btn来说太窄了

+---------+---------+ |[ab][cdef]| |[ ] [ ]| |[ghi][jk lm]| |[ ] [ ]| 进一步缩小

+-------+-----------+ |[ab][cdef]| |[ ] [ ]| |[ghi][jk]| |[][lm]| 进一步缩小，对于两个btn来说太窄

+-----+-------------+ |[ab]| |[ ]| |[cdef]| |[ ]| |[ghi]| |[ ]| |[jk lm]| |[ ]| 因此，实际结果： +---------+---------+ |[ab][cdef]| |[ ] [ ] | |[ghi][jk]| |[][lm]| 预期结果： 按钮的最佳宽度

+---------+---------+ |[ab][cdef]| |[ ] [ ]| |[ghi][jk lm]| |[ ] [ ]| 尝试 我尝试过使用flexbox。然而，我仍然觉得使用它不舒服，因为旧的浏览器和这么大的突破，许多可用性是利害攸关的，而且，我不能得到比最后一个按钮占据整个空间，从而成为3倍大的其他按钮。例如：

+------------+------+ |[ab][cdef][ghi]| |[ ] [ ] [ ]|

---

|[jk lm]|使用Flexbox，您可以模仿这种行为

这里的主要诀窍是两个伪元素，它们充当鬼魂，使第四个按钮即使在包装成第二行后仍继续收缩，因此所有按钮始终具有相同的宽度

堆栈片段

div{ 显示器：flex； 柔性包装：包装； } a{ 弹性：10 calc25%-16px； 保证金：2px8px； 文本对齐：左对齐； 最小宽度：6em； 填充：10px； 边框：1px纯黑； 框大小：边框框； } div:：after，div:：before{ 内容：； 弹性：10 calc25%-16px； 边际：0.8px； 最小宽度：6em； 填充：10px 10px； 边框：1px实心透明； 框大小：边框框； 顺序：1； }

---

没有解决方案…线盒模型不是这样工作的。可能重复-我不同意重复的建议。他们有一个固定宽度的“按钮”，需要容器包装，我需要一个最大宽度的容器，最大灵活宽度的内容不一定是内联的。但是你似乎是对的，没有解决方案。通过阅读你的ASCII图片，我看不出我的答案如何不能解决每个状态。你能告诉我你所看到的不符合相同要求的地方吗？@LGSon由于浏览器的兼容性，我仍然不愿接受答案。如前所述，rekonq 2.4.2。仍然是当前操作系统支持下的浏览器。但IE11目前还没有对此进行测试：按钮不会超出其最小尺寸。天知道，即使一个客户错过一次，他们可能在WinXP上也是不可接受的。我确实喜欢这个想法，因此+1。这在Chromium v58中看起来不错，但在Firefox v54中没有：包装按钮跨越整个宽度，而在rekonq v2.4.2中没有。我不知道webkit版本：按钮的宽度不相等，包装是文本，边框重叠，包装甚至在一个按钮内。这让我对使用flexbox不那么害怕：@MartenKoetsier抱歉…我的小提琴弄错了，不是同一个堆栈片段，试试这个：…在Chrome、FF、IE中测试成功，Edge@MartenKoetsier关于Rekonq 2.4.2，它是在2014年发布的，我们不能期望那些老版本能够跟上。此外，要在没有脚本的情况下完成此操作，您需要Flexbox。也许对于那些年纪较大的人来说，一个回退到剧本上来的办法是一个选择，我可以从小提琴中看到遗漏。这确实好得多，+1。你知道Safari中的支持吗？我在AppleWebkitV602上有用户。我发现Rekonq2.4.2在WebkitV537上。Btw 2014仍然是我的操作系统的受支持版本，在rekonq上有最新更新，因此没有那么旧；这不是IE8…@MartenKoetsier额外看了一眼，如果我能在这段代码片段中发现任何Safari问题，但是没有，所以这也适用于Safari。

div {
    text-align: justify;
}
div::after {
    content: "";
    display: inline-block;
    width: 100%;
}
a {
    display: inline-block;
    text-align: left;
    width: 20%;       /* not precisely 20% and 4%, that's just for */
    margin-right: 4%; /* the sake of the question                  */
    min-width: 10em;
}

<div>
    <a href="/">btn 1</a>
    <a href="/">btn 2</a>
    <a href="/">btn 3</a>
    <a href="/">btn 4</a>
</div>