改變選定李項目的背景顏色

我已經做了一個導航列表，該列表在當前頁面上給出列表項.selected。我試圖給這個可以工作的類添加一個背景顏色，但我無法填充整個li項目。它不會在導航選擇的li項左側添加任何背景顏色。不確定這是否有意義？改變選定李項目的背景顏色

這裏是我的html：

<nav> 
    <ul> 
     <li class="selected"><a href="index.html">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Themes</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</nav>

而這裏的CSS：

nav li { 
    border-right: solid 1px #fbfbfb; 
    display: inline; 
    font-family: 'Lato', sans-serif; 
    font-size: 15px; 
    list-style: none; 
    margin-left: 15px; 
    padding: 22px 15px 22px 0; 
    text-transform: uppercase; 
    text-align: center; 
} 

nav ul { 
    border-top: solid 1px #fbfbfb; 
    border-left: solid 1px #fbfbfb; 
    margin-bottom: 0; 
    padding: 20px 0; 
} 

nav a { 
    color: #6e6e6e; 
    text-decoration: none; 
} 

nav a:hover { 
    border-bottom: 1px solid #2ecc71; 
} 

.selected { 
    background-color: #2ecc71; 

}

來源

2013-10-17 Davo23

你能不能把它在一個小提琴？ –

您在類導航裏有填充和餘量。嘗試在.selected中使用填充和/或邊距。 – StudioArena

只要給左邊一些填充到li -

padding: 22px 15px 22px 15px;

這裏的jsFiddle

來源

2013-10-17 12:21:02

非常感謝！我用這個老套了我的頭腦！ – Davo23

更改padding-left值：

nav li { 
    padding: 22px 15px 22px 10px; 
}

來源

2013-10-17 12:21:04 yakiang

邊距和邊框不明白的背景顏色。

嘗試將li的邊距填充到填充或相同大小的邊框。

nav li { 
    border-right: solid 1px #fbfbfb; 
    display: inline; 
    font-family: 'Lato', sans-serif; 
    font-size: 15px; 
    list-style: none; 
    padding: 22px 15px 22px 15px; 
    text-transform: uppercase; 
    text-align: center; 
}

來源

2013-10-17 12:22:23

與selected類是列表項正在根據您提供給瀏覽器以顯示與margin-left: 15px;和padding: 22px 15px 22px 0;的li元素的說明完全充滿。您指定的填充說明，列表項中的內容左側不應有填充（最後一個值爲0）。

嘗試取出margin-left: 15px;，改變你的填充，以padding: 22px 15px 22px 15px;您nav li元素，像這樣：

nav li { 
    border-right: solid 1px #fbfbfb; 
    display: inline; 
    font-family: 'Lato', sans-serif; 
    font-size: 15px; 
    list-style: none; 
    padding: 22px 15px 22px 15px; 
    text-transform: uppercase; 
    text-align: center; 
}

來源

2013-10-17 12:26:45 Flux

改變選定李項目的背景顏色

回答

相關問題