多列链接允许多行

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>

Answer 2

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

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