1

ウェブサイトのメニュー構成を少し再設計しようとしています。

リストを使用してメニュー オプションを表示していますが、リストのスタイル タイプは円です。

ここに写真があります：

1

コードは次のとおりです。

<li class='category'><a href='$docPath/category/$catDirPath/'>$catName</a></li>

li.listCategory {
    list-style-type: circle;
    margin-left: 17px;
}

これでやりたいことは、人がナビゲーション メニューのこのセクションを選択すると、行全体が黄色で強調表示されることです。

これに関連するすべてのコードは機能していますが、私が抱えている問題は、この行または<li>タグのスタイルに関するものです。

これに対する私の最初の試みは、望ましくない効果を生み出します。

2

<li class='category' id='selectedCat'><a href='$docPath/category/$catDirPath/'>$catName</a></li>

li#selectedCat {
    background-color: #FFCC00;
    list-style-type: disc;
}

そのため、カテゴリ クラスで設定されたマージンを削除すると、次のようになります。

3

このオプションが選択されていることを示す素敵なリスト スタイルが消えてしまったことに注意してください...

したがって、私が基本的にやろうとしているのは、この領域のスタイルを設定することです:

4

このタスクをどのように達成できるかについて、誰か提案やアイデアはありますか?

時間を割いて読んでいただきありがとうございます。

4

2 に答える 2

7

list-style-position: inside;リストアイテム内で弾丸を移動するには、追加が必要です。

https://developer.mozilla.org/en/CSS/list-style-position

于 2012-05-23T13:52:49.370 に答える
1

これは次のようになります。

li#selectedCat {
    padding: 5px;
    background-color: #FFCC00;
    list-style-position: inside;
    list-style-type: disc;
}

デモ: http://dabblet.com/gist/2775371

于 2012-05-23T13:58:44.507 に答える