css - 最初のリスト項目の後に箇条書きがある順序付けられていないリスト

Question

上記のような効果を達成しようとしていますが、最善の方法がわかりません。番号なしリストを使用してスタイルを変更し、箇条書きが内側にのみ表示されるようにすることは可能ですか?

そうでない場合は、疑似を使用して各リスト項目に背景画像を追加して、最初のリスト項目の前に表示されないようにするのが最善の方法でしょうか?

ありがとう

Answer 1

これは比較的単純なので、あなたが試したとは思えませんが、ほとんど労力を必要としないため、ここに解決策があります:

http://jsfiddle.net/kVsce/

HTML

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

CSS

ul li:first-child { list-style: none; }

Answer 2

これを試してください..必要に応じて変更できます。

CSS

ul { background: #004A80; overflow:hidden;}
ul li { color: #3CBCFF; font-size: 18px; float: left; width: 65px; }
ul li span { color: #FFFFFF; font-size: 14px; font-weight: bold; }  
ul li:first-child { list-style: none; } 

HTML

<ul>
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
    <li><span>Item 4</span></li>                
</ul>