inline-block 元素可以在多行上对齐吗

Question

我有很多不同的情况，当一个元素溢出到多行时，我希望一个包含inline-block 菜单元素（通常是一个锚点）的 DIV 就像垂直对齐元素一样。

我将使用一个示例来解释我想要实现的目标：

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

输出：

如果浏览器调整到更小的尺寸，那么最终的inline-block Anchor 元素会下降到新的一行，见截图（宽度约为 725px）：

输出：

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

输出：

我意识到术语 equally 是不精确情况的精确术语，但它是为了证明块中的元素是合理的，以便块中的每一行具有相同数量的元素 +/- 1 (对于奇数）。

这是可以用 CSS 完成的吗？

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

编辑： 有人建议使用 Flexbox 作为解决方案，我将如何使用 Flexbox 来达到预期的效果？

编辑 2： 标准 - 菜单中的元素居中对齐，并且每个都是独立的 inline-blocks 。证明它们所做的一切是搞砸中心对齐并在 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 伪元素破解。基本上它就像你在证明文本一样工作。为了使最后一行证明正确，您必须使用: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>

Answer 2

一个技巧可能是使用媒体查询：

@media (max-width: 725px) {
    .parent-div {
        width: 500px;
    }
}

不完美，但设置这些将按照您想要的方式包装所有内容。

Answer 3

这个变通方法也是基于@media，但是使用伪元素来换行。

@media screen and (max-width: 750px) {
    nav span:nth-of-type(4)::after {
        content: "";
        display: table;
        height: 10px;
    }
}

注意：我在每个 <a> 周围添加了一个 <span> 标记以实现它。

演示： http://jsfiddle.net/s88381hb/1/

Answer 4

您可以使用 CSS 来执行此操作，但您可以使用 javascript 来强制执行 CSS，这可能更有益