多列链接允许多行

Question

我目前正在尝试创建一个 2 列的链接列表，但是当一个链接进入多行时，它会在下一列中留下一个空白。我过去曾使用Masonry 解决过类似的问题，尽管每次我需要使用它时这似乎总是过大了。有没有一种干净的 CSS 方法可以在不使用 JQuery 插件等的情况下实现这种布局？

标记

<ul class="two-col-links">
    <li><a href="">About us</a></li>
    <li><a href="">Press</a></li>
    <li><a href="">NMMT</a></li>
    <li><a href="">Careers</a></li>
    <li><a href="">Sitemap</a></li>
    <li><a href="">Partners &amp; <br>Links</a></li>
    <li><a href="">Terms &amp; <br>Conditions</a></li>
</ul>

CSS

ul {
    width: 200px;
}
li {
    width: 100px;
    float: left;
    display: inline;
}

JSFiddle

请注意上面的示例“合作伙伴和链接”如何在左侧列中留下空白 - 有没有办法解决这个问题？

Answer 1

使用float 是个坏主意。尝试使用column-countproperty

看例子：

ul {
    width: 200px;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

li {
    width: 100px;
    float: left;
    display: inline;
}

<ul class="two-col-links">
	<li><a href="">About us</a></li>
	<li><a href="">Press</a></li>
	<li><a href="">NMMT</a></li>
	<li><a href="">Careers</a></li>
	<li><a href="">Sitemap</a></li>
	<li><a href="">Partners &amp; <br>Links</a></li>
	<li><a href="">Terms &amp; <br>Conditions</a></li>
</ul>

Answer 2

ul {
    width: 200px;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

请注意，这将导致选项向下流动而不是从左向右流动，并且不适用于版本 10 之前的 Internet Explorer。如果您可以接受这些限制，这是最可靠的方法，因为它可以如果菜单中的选项数量增加，可以扩展到多列。