2011-11-15 5 views
4

私はただこのイメージを使用することはできますが、正しい人の心は本当に望んでいますか?コンテンツのラッピングを回避する:セレクタの内容の前に

リスト項目プレフィックスの色を順序付けられていないリストで変更するためのきれいな方法を見つけようとしています。

:beforeセレクタを使用すると、これを簡単に行うことができます。 (そう、私はie7について知っている、幸い私はそれは問題ではない)。

.ul1 li 
{ 
    list-style-type:none; 
} 

.ul1 li:before, .ol1 li:before 
{ 
    content:"\25CF"; /*escaped unicode coloured circle*/ 
    color:#F68A39; 
    font-weight:bold; 
    font-size:18px; 
    text-align:right; 
    padding-right:6px; 
    width:10px; 
} 

私が持っている問題は、私のリスト項目の内容は今:beforeコンテンツを包むだろうということです。これを防ぐ方法はありますか?

ここから始まるマークアップがあります。乾杯!

<ul class="ul1"> 
    <li> 
     Lorem Ipsum is simply dummy text of the printing and typesetting 
     industry. Lorem Ipsum has been the industry's standard dummy text 
     ever since the 1500s, when an unknown printer took a galley of 
     type and scrambled it to make a type specimen book. It has survived 
     not only 
    </li> 
    <li> 
     Lorem Ipsum is simply dummy text of the printing and typesetting 
     industry. Lorem Ipsum has been the industry's standard dummy text 
     ever since the 1500s, when an unknown printer took a galley of 
     type and scrambled it to make a type specimen book. It has survived 
     not only 
    </li> 
    <li> 
     Lorem Ipsum is simply dummy text of the printing and typesetting 
     industry. Lorem Ipsum has been the industry's standard dummy text 
     ever since the 1500s, when an unknown printer took a galley of 
     type and scrambled it to make a type specimen book. It has survived 
     not only 
    </li> 
    <li> 
     Lorem Ipsum is simply dummy text of the printing and typesetting 
     industry. Lorem Ipsum has been the industry's standard dummy text 
     ever since the 1500s, when an unknown printer took a galley of 
     type and scrambled it to make a type specimen book. It has survived 
     not only 
    </li> 
</ul> 

答えて

10

あなたはli要素に絶対に:beforeコンテンツを配置し、その後li要素にマージンやパディングを適用することによって、それを行うことができます。 topleftright、および/またはbottomを使用して箇条書きの位置を微調整してください。

ここに例を示します。http://jsfiddle.net/bwwsV/1/

+0

鮮明な回答!それほどありがとうございました。 –

関連する問題