6

次のセクションを持つフォームを作成しています。

ここに画像の説明を入力

アクティビティとオブジェクトのセクションに対する私のアプローチは、リストを使用してこれらのオプションを作成することでした。

<div class="formBlock">
    Activities
    <ul id="coloringAct">
        <li>Activity Type A</li>
        <li>Activity Type B</li>
        <li>Activity Type C</li>
    </ul>
</div>

カスタム リスト スタイル (画像ではない) を使用するか、:before セレクターを使用して、色付きのブロックをリストの箇条書きのように作成できるようにしたいと考えています。基本的に、次のようなものです：

#formTable tr td .formBlock li {
    list-style:none;
    margin:0;
    padding:0;
    border-top:1px solid #DDD;
}
#formTable tr td .formBlock li:before {
    content: "";
    width:20px;
    height:20px;
    background:red;
}

CSSを使用してこれを達成するにはどうすればよいですか? これは機能していません。

ここにフィドルがあります。

4

2 に答える 2

13

これを少し調整します。

formTable tr td .formBlock li:before {
    content: "";
    width:20px;
    height:20px;
    background:red;
    display: block;
    float: left;
    margin-right: 5px;
}

なぜ？

表示: ブロックを使用すると、四角形を見ることができます

float: 次の行にテキストを送信しないようにします

margin-right: テキストが正方形に近づきすぎないようにします

スタイルと状況に合わせて多くの調整を行う必要があります:)しかし、重要な要素は「表示ブロック」がありませんでした

于 2012-12-10T16:09:31.603 に答える
5

私は解決策を考え出しました。どうやら正しいコードを持っていたようですが、追加するだけで済みました

display:inline-block;

以下は正しいです。

    .formBlock {
        float:left;
        background-color:#f5f5f5;
        padding:0px 10px 0px 10px;
        color:#627686;
        line-height:32px;
        overflow:hidden;
        width:150px;
        border-radius:5px;
        margin-right:15px;
    }  
    .formBlock li {
        list-style:none;
        margin:0;
        padding:0;
        border-top:1px solid #DDD;
    }
    .formBlock li:before {
        display:inline-block;        
        content: "";
        width:10px;
        height:10px;
        background:red;    
        margin-right:5px;            
    }​
于 2012-12-10T16:09:58.553 に答える