将列表放入CSS中的两列

前端之家收集整理的这篇文章主要介绍了将列表放入CSS中的两列前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我无法弄清楚如何将我的列表放入两列列表中.我尝试了其他类似问题中的一些例子,但它并没有改变任何东西.
<div class="section" id="skillset">
<h1>SKILL SET:</h1>
<h2>Have passed classes which taught all of the following:</h2>
<ul class="skills">
    <li>Intermediate Spanish</li>
    <li>Microsoft Word</li>
    <li>Microsoft Power Point</li>
    <li>Microsoft Excel</li>
    <li>Dreamweaver</li>
    <li>Adobe Photoshop</li>
    <li>CAD Lab</li>
    <li>Visual Basic</li>
    <li>C++</li>
    <li>Java</li>
</ul>
</div>

我希望列表中有5个项目,然后是右边的5个项目.

到期一小时:(

解决方法

列数一定可以帮到你.

只需添加以下CSS即可

.skills
{
    -moz-column-count: 2;
    -moz-column-gap: 2.5em;
    -webkit-column-count: 2;
    -webkit-column-gap: 2.5em;
     column-count: 2;
     column-gap: 2.5em;
}

但请检查浏览器支持,因为它在旧版本的IE中不起作用

这是一个Fiddle demo的工作代码

原文链接:https://www.f2er.com/css/215163.html

猜你在找的CSS相关文章