48

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

これどうやってするの？

4

7 に答える 7

38

次の例は、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>
于 2012-05-07T19:45:33.210 に答える
37

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

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

次に、箇条書きを隠したいリストに適用します。

<ul class="no-bullets">

他のすべてのリスト (特定のクラスを除く) には、通常どおり箇条書きが表示されます。

于 2012-05-07T19:33:07.900 に答える
6

、またはそれらの祖先要素liに基づいて、異なる要素のスタイルを設定できます。classid

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;
}
于 2012-05-07T19:32:37.230 に答える
1

この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を割り当て、これを次のように変更します。

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

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

#content ul { list-style-type: disc; margin-left: 1.5em; }
于 2012-05-07T19:53:21.230 に答える
1

この小さな解決策に対するフラビオの回答の一部を組み合わせました。

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

箇条書きに関する決定は、囲んでいる要素 (通常はdiv. 私の解決策の欠点(または todo) は、liststyle の削除が順序付きリストにも適用されることです。

于 2013-11-13T09:07:12.867 に答える
0

表示したい箇条書きのクラスを定義することもできるので、CSS で:

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">

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

于 2013-11-30T12:42:52.463 に答える