デフォルトのリストスタイル(CSS)とは何ですか?


90

私のウェブサイトではreset.cssを使用しています。これをリストスタイルに正確に追加します。

ol, ul {
    list-style: none outside none;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}

問題は、すべてのリストスタイルがに設定されていることです NONEこれでていることです。Webサイトのサブページのすべてのリスト(のすべてのリスト)の元のリストスタイル(デフォルト)に戻したい.my_container

私は設定をしようとしたときのようなものlist-style-typeには、inheritちょうどこのCSSプロパティのブラウザのデフォルトスタイルを継承しませんされています。

reset.cssを変更せずに、特定のプロパティの元のブラウザのスタイルを継承する方法はありますか?


4
reset.cssは、Webデザインで最悪のアンチパターンの1つです。
ᆼᆺᆼ2012

9
完全にリセットされたスタイルシートではなく、すべての要素に適切なデフォルトを設定するgithub.com/necolas/normalize.cssのようなものを検討してください。そうすれば、すべてのブラウザのベースラインから始めて、そこから構築することができます。また、デフォルト設定に戻すためにコードを追加する必要はありません。
Olly Hodgson 2012

1
@OllyHodgsonはい、しかし、reset.cssを使用したい特定の理由があります。私は実際にできるだけ多くのスタイルをクリアする必要があり、それを書き直したいと思っています-その逆ではありません:)
Atadj 2012

1
それらを消去して書き直したい場合、この質問のポイントは何ですか?私が見る限り、2つのオプションがあります:1)リストスタイルのリセットを特に避けてデフォルトを維持する2)リセットして、独自のリストスタイルを考え出す。
BoltClock

1
@ BoltClock-明確にするために-ユーザーに独自のリストを最初から作成する機会を与えたい(可能なスタイルごとにクラスを追加した)-「デフォルト」設定のようなものがあるかどうかだけを考えていましたが、ないのでデフォルトのスタイル-作成します。
atadj 2012

回答:


148

私はリセットを削除するためにこのCSSを設定していました:

ul { 
   list-style-type: disc; 
   list-style-position: inside; 
}
ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}

編集:もちろん特定のクラスで...


これまでのところ、正常に機能しています:)これで私の質問は解決すると思います。私は、ネストされたリストなどでより多くの今、それをテストするつもりだ
Atadj

5
「元のリストスタイルに戻す(デフォルト)」ことはありません。いくつかのスタイルを設定するだけです。
Jukka K. Korpela 2012

私は同意しますが、いずれにせよ、目標は単に何らかのスタイルを設定することでした。このCSSは、リストにかなり基本的なスタイルを提供します。
zessx 2012

2
list-style-typeには「デフォルト」オプションがなく、回答を得た後、それがわかりました。ブラウザは、ブラウザ間で一貫性がないことが多いいくつかのスタイルを追加するだけです。
atadj 2012

1
また、誰かに表示を設定してもらいました。インラインブロック。弾丸を再び表示するには、リストアイテムである必要があるようです。
マーク

32

私はこれが実際にあなたが探しているものだと思います:

.my_container ul
{
    list-style: initial;
    margin: initial;
    padding: 0 0 0 40px;
}

.my_container li
{
    display: list-item;
}

はい、これも重要な答えだと思います。inherit親コンテナからスタイルを継承し、デフォルトのブラウザ値に設定しません。initialこれは(後でその存在について知りました)ですか?しかし、それは確かでul { list-style: initial; }ありol { list-style: initial; }、有効な結果を生み出すでしょうか?list-style適用する要素に関係なく、初期値に設定されていませんか?しませんinitial値にはdisc outside noneリストの両方のタイプのために?
atadj 2014年

1
すごい、initial私には思いもよらなかった!
BenjaminRH

8
initialIEのいずれかのバージョンでサポートされていませんmsdn.microsoft.com/en-us/library/...
lulalala

12

ドキュメントによると、ほとんどのブラウザは<ul><ol>および<li>要素を次のデフォルト値で表示します。

ULまたはOLタグのデフォルトのCSS設定:

ul, ol { 
    display: block;
    list-style: disc outside none;
    margin: 1em 0;
    padding: 0 0 0 40px;
}
ol { 
    list-style-type: decimal;
}

LIタグのデフォルトのCSS設定:

li { 
    display: list-item;
}

ネストされたリストアイテムのスタイルも設定します。

ul ul, ol ul {
    list-style-type: circle;
    margin-left: 15px; 
}
ol ol, ul ol { 
    list-style-type: lower-latin;
    margin-left: 15px; 
}

注:上記のスタイルをクラスで使用すると、完璧な結果が得られます。さまざまなリストアイテムマーカーも参照してください。


この場合、ネストされたリストには、新しいレベルで上下の余白が追加されます。
VorganHaze

10

http://www.w3schools.com/tags/tag_ul.asp

ul { 
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

1
おかげで私の命が救われ、なぜ私のサブメニューに地獄が埋められているのか疑問に思いました。
Asura

これにより、ネストされたリストにvertical.margijが追加されます。
VorganHaze

4

それはいけません。要素にプロパティを割り当てるスタイルシートが適用されている場合は常に、要素のインスタンスについて、ブラウザのデフォルトに到達する方法はありません。

reset.cssの(議論の余地のある)アイデアは、ブラウザーのデフォルトを削除して、クリーンなデスクから独自のスタイリングを開始できるようにすることです。reset.cssのバージョンでこれを完全に行うことはできませんが、reset.cssを使用する作成者は、完全にレンダリングを定義することになっています。


2

2番目のcssブロックのすべての要素のマージンをリセットしています。デフォルトのマージンは40pxです-これで問題が解決するはずです:

.my_container ul {list-style:disc outside none; margin-left:40px;}

1

将来への答え:CSS 4にはおそらくrevertキーワードが含まれています。これは、ユーザーまたはユーザーエージェントのスタイルシート[ソース]からプロパティをその値に戻します。これを書いている時点では、Safariのみがこれをサポートしています。ブラウザサポートの更新については、こちら確認してください

あなたの場合、あなたは以下を使用します:

.my_container ol, .my_container ul {
    list-style: revert;
}

詳細については、この他の回答も参照してください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.