html - 多列链接允许多行

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-count property

看例子:

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>