4

以下のような 2 列の順序なしリストを作成しようとしていますが、プラス記号のイメージも統合する方法を知りたいです。古いブラウザーをサポートできるように、CSS3 の利点がないソリューションを探しています。

ここに私のウェブサイトへのリンクがあります: http://jobspark.ca/job-listings/

Squarespace テンプレートを使用しているため、そのセクションの html はまだあまりありません。

ここに画像の説明を入力

これは、リストを挿入しようとしている場所を説明するスクリーンショットです ここに画像の説明を入力

4

1 に答える 1

8

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

于 2013-06-09T02:13:03.447 に答える