html - 创建一个两列无序列表

Question

我正在寻找类似于下面的两列无序列表，但也想知道如何整合加号的图像。我正在寻找一个没有 CSS3 优点的解决方案，以便它可以支持旧版浏览器。

这是我网站的链接：http: //jobspark.ca/job-listings/

因为我使用的是 Squarespace 模板，所以我还没有太多的 html 用于该部分。

这是一个屏幕截图，用于解释我要在哪里插入列表

Answer 1

作为原型，您可以从以下 HTML 开始：

<ul class="two-col-special">
    <li>First Category</li>
    <li>Second Category</li>
    <li>Third Category</li>
    <li>Fourth Category</li>
    <li>Fifth Category</li>
</ul>

并应用以下 CSS：

.two-col-special {
    border: 1px dotted blue;
    overflow: auto;
    margin: 0;
    padding: 0;
}

.two-col-special li {
    display: inline-block;
    width: 45%;
    margin: 0;
    padding: 0;
    vertical-align: top; /* In case multi-word categories form two lines */
}
.two-col-special li:before {
    content: '+';
    padding: 5px;
    margin-right: 5px; /* you can tweak the gap */
    color: orange;
    background-color: white; /* in case you want a color... */
    display: inline-block;
}

诀窍是将显示类型更改为inline-block并将宽度设置为 45% 左右的某个数字。

加号作为伪元素添加到列表项之前。

如果您的文本（类别）长度相似，那么这会给您一个相当干净的外观。

演示小提琴：http: //jsfiddle.net/audetwebdesign/4PdQw/