css - 将 ul 拆分为列

Question

我有一个包含 9 个元素的 ul 列表，我想将其分成 2 列。第一个具有前 4 个元素，第二个列具有其他 5 个元素。

我用了这个css

ul { -webkit-columns: 2;  -moz-columns: 2; columns: 2; }

HTML

<div class="footernav">
            <ul class="footer-lt">
                <li><a>Home</a></li>
                <li><a>Resort Overview</a></li>
                <li><a>Photo Gallery</a></li>
                <li><a>Contact Us</a></li>
                <li class="footertextcolor">Phone</li>
                <li>+000 60 275-737<li>
                <li class="footertextcolor">Address</li>
                <li>Armenia, Yerevan,</li>
                <li>G. Hovsepyan </li>
            </ul>
        </div>

但我在第一列中得到 5 个元素，在第二列中得到 4 个元素。有没有一种方法可以指定中断发生的位置？

Answer 1

老实说，您最好制作 2 个 ul 标签。似乎没有办法使用该 CSS 属性来完成 2 个不相等的列，当然除非您在需要时在其中放置一些空白的 li 标签。