将列表放入CSS中的两列

Question

我无法弄清楚如何将我的列表放入两列列表中。我尝试了其他类似问题中的一些例子，但它并没有改变任何东西。

<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个项目。

一小时内到期:(

Answer 1

column-count肯定可以帮到你。

只需添加以下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工作代码

Answer 2

在你的CSS代码中，把它放在：

.skills {
/* other codestuff */
column-count: 2;
}

我希望这已经足够了。

Answer 3

设置li宽度50％和 display：inline-block;

Answer 4

您还可以将以下css属性添加到li元素：

.skills li {
   float: left;
   width: 50%;
}