プロトタイプとして、次の 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/