2009-04-01 9 views
2

リンクのリストをスタイリングすることは面倒なことだと思ったのですが!htmlの順序付けられていないリストのスタイリングを制御するにはどうすればよいですか?

  • 最初の問題 任意のcharを箇条書きとして使用したいと思います。私は 今これは不可能だと確信していますが、 多分あなたは知っていますか?

  • いずれにしても、弾丸と< li>の内容の距離を制御したいと考えています。

  • 私は箇条書きの高さを調整したいと思っています(フォント/サイズにかかわらず< liのテキストを中心にしています)。

  • <欄に< ul>と書かれています。

  • 長いアイテムを< liに入れたいと思います。

IE6以上のすべてのブラウザで動作します。できるだけIEの奇妙なことを特別な嘆願書として少しだけ! (これは私が:beforeを使用することができないことを意味します)

リストではなく<スパン>と</br>を使用するように誘惑されます!

答えて

2

まず、CSSを使用してリスト要素の余白/余白を削除することを忘れないでください。そうすれば、すべてのブラウザですっきりしたスレートが得られます。次に、弾丸イメージを常にセンタリングしたい場合は、イメージを使用します。

ul{ 
    margin: 0; 
    padding: 0; 
} 

ul li{ 
    padding: 0 0 0 20px; /*so text does not appear on top of bullet */ 
    background: url(error.gif) no-repeat 0 50%; /* this will set the bullet to appear in the middle */ 
} 
+0

私は同意するものとします。最善の方法は背景画像を使用することです。ドット自体のスタイルを設定しようとするのはあまりにも困難です。 – AmbroseChapel

1

並べ替えられていないリストでは、任意の文字を表示するグラフィックを作成する必要があります。他の利用可能な値は次のとおりです。

list-style-type: disc | circle | square | none 

テキスト内の箇条書きの滞在を作る代わりに干す、

list-style-position: inside 

を使用するには?あなたの最後のポイントで "ラップアラウンド"についてあなたが何を意味するか分からない。

関連する問題