margin-right：auto但我想它会是最大值

Question

我的容器宽度等于我页面的70％。在容器中，我放置四个宽度等于22％的盒子，并设置margin-right参数以将这些盒子相互分开。但是，这些框不会覆盖父元素的所有宽度 - 我设置为“auto”的margin-right参数很小，而且对于所有父宽度（70％的网页）。

我知道我可以设置“4％”的保证金权限，但我想自动执行，分为两个，三个，四个方框。

示例代码

<div id="parent" style="width: 70%;">
    <div class="box" style="display: inline-block; margin-right: auto; width: 22%;">box 1</div>
    <div class="box" style="display: inline-block; margin-right: auto; width: 22%;">box 2</div>
    <div class="box" style="display: inline-block; margin-right: auto; width: 22%;">box 3</div>
    <div class="box" style="display: inline-block; margin-right: 0; width: 22%;">box 4</div>    
</div>

Answer 1

Test Here

当我在OS X上的Chrome中尝试此操作时，每个框的宽度为109px。在我看来，他们适当地填补了相同的空间。