Question

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

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

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

输出： Image 1 - 100% width

如果浏览器调整到较小的大小，那么最终的inline-block Anchor元素将落到新行上，请参见屏幕截图（宽度为~725px）：

输出： image 2 - 725px width

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

输出：

image 3 - desired layout format

我意识到术语同样对于不精确的情况是一个确切的术语，但要证明块中的元素是正确的，以便块中的每一行具有相同数量的元素+/- 1（奇数）。

这可以用CSS完成吗？

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

编辑： 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强制使用假行来让浏览器证明最后一行的合理性。试想一下如何运作，它永远不会证明最后一行。

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

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

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

Answer 4

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

内联块元素可以在多条线上对齐

4 个答案: