0

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

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

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

输出： 图片 1 - 100% 宽度

发生的情况是，如果浏览器调整到更小的尺寸，那么最终的inline-blockAnchor 元素会下降到一个新行上，请参见屏幕截图（宽度约为 725px）：

输出： 图片 2 - 725px 宽度

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

输出：

图 3 - 所需的布局格式

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

这是可以用 CSS 完成的吗？

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

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

编辑 2：标准 - 菜单中的元素居中对齐，并且每个都是单独inline-block的 s 。证明它们所做的一切是搞砸中心对齐并在 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>
4

4 回答 4

2

您必须使用: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>

于 2015-03-20T17:23:22.290 回答
1

此解决方法也基于@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/

于 2015-03-20T18:31:18.783 回答
1

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

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

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

于 2015-03-20T17:25:02.373 回答
0

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

于 2015-03-20T17:18:33.183 回答