HTML/CSS - 列表 - 在使用列表樣式時將背景顏色應用於整行？

我正在嘗試重新設計我的網站菜單配置。HTML/CSS - 列表 - 在使用列表樣式時將背景顏色應用於整行？

我正在使用列表來顯示菜單選項，並且列表具有圓形的樣式類型。

這裏有一個畫面：

這裏是代碼：

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

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

我想用這個做的，是有整個行以黃色突出顯示，一旦人已選擇導航菜單的這一部分。

所有與此相關的代碼正在工作，但我遇到的問題是關於此行的樣式或<li>標籤。

我在第一次嘗試產生不必要的影響：

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

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

所以我刪除了保證金中的類類，進而設置這樣結束了：

請注意，現在我的很好的列表樣式顯示該選項已被選中，並已消失編...

那麼，我基本上是試圖做的是樣式這一領域：

有沒有人對我怎麼能完成這一任務的任何建議或想法？

在此先感謝您花時間閱讀此！

來源

2012-05-23 Craig van Tonder

您需要額外的list-style-position: inside;才能將項目符號移動到列表項中。

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

來源

2012-05-23 13:52:49 feeela

http://www.w3schools.com/cssref/pr_list-style-position.asp – saluce

謝謝！但是，這是如何投訴？這正是我所需要的，但我的意思是，它也可以在其他瀏覽器中工作嗎？ –

查看上面的鏈接或[Sitepoint refrence]（http://reference.sitepoint.com/css/list-style-position）頁面，瞭解瀏覽器兼容性的概述。 – feeela

這樣做：

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

演示：http://dabblet.com/gist/2775371

來源

2012-05-23 13:58:44 Ana

感謝您的迴應，這也是正確的！但不幸的是feeela更快回復:) –

是的，並提供良好的鏈接，以及:) – Ana

HTML/CSS - 列表 - 在使用列表樣式時將背景顏色應用於整行？

回答

相關問題