创建一个两列无序列表答案

【问题标题】：Creating a two column Unordered List创建一个两列无序列表
【发布时间】：2013-06-05 00:26:24
【问题描述】：

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

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

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

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

【问题讨论】：

2 个具有浮动属性的 div 包含在一个 div 中，或者简单地尝试一个具有 2 列的表格：P
我相信在Squarespace你可以自定义CSS？另外，在你的列表中，列表项从左到右再从上到下是否可以？
你打赌我把那个部分变成了一个代码块，所以可以插入 html 并用 css 自定义它。只需要看一个如何设置代码的例子。他们走哪条路都没有关系，所以对我来说都很好。 @Marc Audet
所以你希望你的列表项连续出现两个，并且你想要一个加号作为列表标记而不是通常的嫌疑人。
是的，这正是我想要做的。感谢您的帮助

标签： html css list web

【解决方案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/

【讨论】：

太完美了！太感谢了。刚做了最后一件事，我完全忘记添加了。将每个类别链接到 url/page 是否容易
你知道为什么有float的时候子弹会消失，需要使用:before吗？ stackoverflow.com/questions/24508311/…
@jcubic 将 float 属性应用于li 元素不会影响列表标记（项目符号）的外观。但是，将显示类型更改为 inline-block 而不是 list 将删除列表标记。
现在弄清楚如何做到这一点，以便结果是列优先而不是行优先...