html - 行内 block 元素是否可以在多行上对齐

Question

我有很多不同的情况，我想要一个包含 inline-block 的 DIV。菜单元素——通常是一个 anchor ——当一个元素溢出到多行时，就像垂直对齐元素一样。

我将用一个例子来解释我想要实现的目标:

查看我的代码笔: http://codepen.io/anon/pen/wBRpqJ?editors=110

输出:

如果浏览器调整到更小的尺寸，那么最后的 inline-block 会发生什么？ anchor 元素掉落到新行上，请参见屏幕截图(宽度为 ~725px):

输出:

这本身很好，但我希望它做的是将 DIV 中的元素平均拆分，因为它在两行上，然后平均分散在两行中，因此大致是合理的，如果您将 codepen 的大小调整为大约 500 像素宽，您将看到我希望它看起来如何如果元素不能全部留在一行。所以下图是我想看看父 DIV 元素中是否发生任何换行。

输出:

我意识到术语equally 是一个精确的术语，用于表示不精确的情况，但要证明 block 中的元素是合理的，以便 block 中的每一行都具有相同数量的元素 +/- 1 (对于奇数)。

这可以用 CSS 完成吗？

P.S> 这些元素的内容是动态和变化的，任何解决方案适用的情况也是动态和变化的，因此专门针对这种情况的解决方案可能无济于事。

编辑:Flexbox 已被建议作为一种解决方案，我将如何使用 Flexbox 来达到预期的结果？

编辑 2:条件 -- 菜单中的元素居中对齐并且各自独立 inline-block小号。它所做的一切都是证明它们的合理性，就是搞砸了中心对齐并在 NAV 容器中的 anchor 元素周围添加额外的间隔线。

编辑 3:我将把我的代码放在这里，用于 codepen 示例:

CSS:

.mainbox {
        width:90%;
        max-width:1200px;
        min-width:400px;
        margin:0.4em auto;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1em;
        border: 1px solid #006;
    }

nav {
    background-color: rgba(204,204,204,0.4);
    padding:5px 5px 0px 5px;
    text-align:center;
    position: absolute;
    /* bottom increased from zero to make example clearer on codepen */
  bottom:1em;
    margin:auto;
    width:90%; 
  /* width adjusted from 100% for codepen layout */
}
nav a {
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
    padding:2px 4px;
    color: #000;
    border: 1px solid #000;
    line-height: 1.1em;
    background-color: #DDDDDD;
    margin:0 3px 3px 3px;
    display:inline-block;
}
nav a:hover, nav a:focus {
    background-color: #FFFFFF;
    color:#000000;
    text-decoration: none;
}

HTML:

<div class="mainbox">
  <header>
  <nav>
           <a href="#cal" title="Cottage Availbility">Availability</a>
<a href="#tariff" title="Tariff">Tariff</a>
<a href="#" title="Make A Booking ">Make A Booking</a>
<a href="http://www.website.com/AccessStatement.pdf" title="Access Statement" target="_blank">Access Statement</a>
<a href="http://www.website.com/TandCs.pdf" title="T&amp;Cs" target="_blank">T&amp;Cs</a>
<a href="#contact" title="Contact the owners">Contact</a>
<a href="http://www.elsewhere.co.uk" title="Visit the website">
Parent Site</a>
        </nav>
  </header>
  </div>

Answer 1

你必须使用 :after 伪元素 hack。基本上它就像你在证明文本一样工作。为了使最后一行对齐，您必须使用 :after 强制伪造一行以使浏览器对齐最后一行。想想 justify 是如何工作的，它永远不会证明最后一行。

.menu {
  margin: 0;
  padding: 0;
  text-align: justify;
  font-size: 0;
}
li {
  display: inline-block;
  font-size: 24px;
  width: auto;
  background-color: #ccc;
  text-align: center;
  padding: 0 10px;
  border: 1px solid black;
  margin:10px;
}
ul:after {
  display: inline-block;
  width: 100%;
  content: '';
}

<ul class="menu">
  <li>Item 12341231</li>
  <li>Item 123462346</li>
  <li>Item 234523</li>
  <li>Item 34563457</li>
  <li>Item 456756</li>
  <li>Item 567856</li>  
  <li>Item 678969</li>
  <li>Item 7453456</li>
  <li>Item 8234523</li>
</ul>