web-dev-qa-db-ja.com

ナビゲーションメニューとフッターリンクで<li>箇条書きを非表示にする方法

リストされたスタイルを使用してリンクと画像をリストするナビゲーションメニュー、フッター、スライドショーがあります。私はCSSを持っていますlist-style:none;ナビゲーションとフッターのリンクと画像の横にある箇条書きを非表示に設定しますが、リストの通常のテキストに箇条書きを表示したいです。

これどうやってするの？

htmlhtml-lists
33
user1373581

次の例では、CSSスタイルクラスを使用して箇条書きを削除する方法を説明します。 cssクラスと同様に、識別子（#id）、親タグなどによって使用できます。CSSを定義してページフッターから行頭文字を削除するのと同じ方法を使用できます。

このサイト を出発点として使用しました。

<html>
<head>
<style type="text/css">
div.ui-menu li {
    list-style:none;
    background-image:none;
    background-repeat:none;
    background-position:0; 
}
ul
{
    list-style-type:none;
    padding:0px;
    margin:0px;
}
li
{
    background-image:url(sqpurple.gif);
    background-repeat:no-repeat;
    background-position:0px 5px; 
    padding-left:14px;
}
</style>
</head>

<body>

<div class="ui-menu">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>
28
Flavio Cysne

非表示にする箇条書きのクラスを定義する必要があります。たとえば

.no-bullets {
    list-style-type: none;
}

次に、隠し箇条書きが必要なリストに適用します。

<ul class="no-bullets">

他のすべてのリスト（特定のクラスを含まない）は、通常どおりにブリットを表示します。

21
Israel Unterman

li、class、またはそれらの祖先要素に基づいて、id要素のスタイルを変更できます。

li { /* styles all li elements*/
    list-style-type: none;
}

#ParentListID li { /* styles the li elements that have an ancestor element
                      of id="ParentListID" */
    list-style-type: bullet;
}

li.className { /* styles li elements of class="className" */
    list-style-type: bullet;
}

または、祖先要素を使用するには：

#navigationContainerID li { /* specifically styles the li elements with an ancestor of
                               id="navigationContainerID" */
    list-style-type: none;
}

li { /* then styles all other li elements that don't have that ancestor element */
    list-style-type: bullet;
}
5
David Thomas

Flavio's answer のいくつかをこの小さなソリューションに組み合わせました。

.hidden-ul-bullets li {
    list-style: none;
}
.hidden-ul-bullets ul {
    margin-left: 0.25em; // for my purpose, a little indentation is wished
}

箇条書きに関する決定は、通常はdivなどの囲み要素で行われます。私のソリューションのdrawback（またはtodo）は、リストスタイルの削除が順序付きリストにも適用されることです。

1
Wolf

このHTML5レイアウトを使用しているとしましょう：

<html>
    <body>
        <header>
            <nav><ul>...</ul></nav>
        </header>
        <article>
            <ul>...</ul>
        </article>
        <footer>
            <ul>...</ul>
        </footer>
    </body>
</html>

あなたのCSSで言うことができます：

header ul, footer ul, nav ul { list-style-type: none; }

HTML 4を使用している場合、DIVにIDを割り当て（新しいfancy-pants要素を使用する代わりに）、これを次のように変更します。

#header ul, #footer ul, #nav ul { list-style-type: none; }

CSSリセットスタイルシート（Eric Meyerのような）を使用している場合、リセットするとすべてのリストからリストスタイルが削除されるため、実際にはリストスタイルを戻す必要があります。

#content ul { list-style-type: disc; margin-left: 1.5em; }
1
Derreck Dean

また、CSSでshowにしたい箇条書きのクラスを定義することもできます。

ul {list-style:none; list-style-type:none; list-style-image:none;}

HTMLでは、表示するリストを定義するだけです。

<ul style="list-style:disc;">

または、代わりにCSSクラスを定義します。

.show-list {list-style:disc;}

次に、表示するリストにそれを適用します。

<ul class="show-list">

他のすべてのリストには箇条書きは表示されません...

0
Marcus