無秩序リスト内の箇条書きの後にスペースを制御する

ul内の箇条書きの後にテキストを作成する方法はありますか？無秩序リスト内の箇条書きの後にスペースを制御する

私が考えることができる唯一の方法は、カスタム弾丸イメージを作成してパディングを変更することですが、私はより簡単な解決を望んでいました。

2011-07-13 Jamie Kudla

だけpadding-leftを使用します。

li { padding-left: 20px }

右側にあるリスト項目20ピクセルずつ移動しますが、それは弾丸自体が動きません。 example fiddleです

出典

2011-07-13 23:53:05

ありがとう、これは私が探していたものです –

あなたは大歓迎です:)しかし、@ b01はあなたのCSSの 'list-style-position'を変更すると、それが「外に」設定されているときに動作します。 –

'list-style-position：inside'を使用している場合、箇条書きがテキストブロックの一部になっているので、これは機能しません。 –

liタグの左側にパディングを追加できますが、これにはliリストスタイルの位置を外側に設定する必要があります。

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      li { 
       list-style-position: outside; 
       padding-left: 20px 
      } 

     </style> 
    </head> 
    <body> 

     <ul> 
      <li>Text 1</li> 
      <li>Text 2</li> 
      <li>Text 3</li> 
      <li>Text 4</li> 
     </ul> 

    </body> 
</html>

出典

2011-07-13 23:51:07 b01

'のlist-style-position'のデフォルト値は' outside'あなたが（もちろん、それは他の場所で上書きされます、いない限り）それを指定する必要はありませんので。 –

これを試してみてください。

<ul> 
    <li style="padding: 0px 0px 0px 100px;">line 1</li> 
    <li>line 2</li> 
</ul>

出典

2011-07-13 23:54:13 MacGyver

無秩序リスト内の箇条書きの後にスペースを制御する

答えて

関連する問題