-6

我有10個UL，每個有5個LI。它看起來像一張桌子，但我想只在背後有背景。我試圖做一個小時。它甚至有可能嗎？CSS樣式的無序列表

ul { 
background: whitesmoke; 
padding-top: 0px; 
} 
ul:nth-child(odd) { background: ghostwhite; } 
li:nth-child(3n) { 
font-weight: bold; 
color: white; 
} 

li:hover { 
background-color: greenyellow; 
} 

ul:hover { 
background-color: yellow; 
} 

li{ 
display: inline-table; 
padding-top: 0px; 
} 

ul { 
font-size: 1px; 

} 

ul li { 
font-size: 14px; 
display: inline-block; 
width: auto; 
}

來源

2017-10-12 Rado Sabo

告訴我們你做了什麼 –

你可以請添加代碼，並解釋你已經嘗試過嗎？ – 2017-10-12 20:19:28

@TemaniAfif對不起 –

所以，我真的不明白你的問題是什麼，或者，如果我relly提供正確的答案，但我有這樣的：

例

ul { 
 
    padding: 0px; 
 
    font-size: 1px; 
 
} 
 

 
ul:nth-child(odd) li{ 
 
    background: black; 
 
    color: blue; 
 
} 
 

 
ul:nth-child(odd) li:hover{ 
 
    background: white; 
 
} 
 

 
ul:nth-child(odd) li:nth-child(3n){ 
 
    font-weight: bold; 
 
    color: white; 
 
    background: #999; 
 
} 
 

 
ul:nth-child(odd) li:hover:nth-child(3n){ 
 
    background: darkblue; 
 
} 
 

 
li:nth-child(3n){ 
 
    font-weight: bold; 
 
    color: white; 
 
    background: #333; 
 
} 
 

 
li:hover:nth-child(3n){ 
 
    background: darkgreen; 
 
} 
 

 
li:hover { 
 
    background: lightblue; 
 
} 
 

 
li{ 
 
    display: inline-table; 
 
    padding: 0; 
 
    padding-left: 2px; 
 
    padding-right: 2px; 
 
} 
 

 
ul li { 
 
    color: green; 
 
    font-size: 14px; 
 
    display: inline-block; 
 
    width: auto; 
 
}

<ul> 
 
    <li>ul 1 ListItem 1</li> 
 
    <li>ul 1 ListItem 2</li> 
 
    <li>ul 1 ListItem 3</li> 
 
    <li>ul 1 ListItem 4</li> 
 
    <li>ul 1 ListItem 5</li> 
 
</ul> 
 
<ul> 
 
    <li>ul 2 ListItem 1</li> 
 
    <li>ul 2 ListItem 2</li> 
 
    <li>ul 2 ListItem 3</li> 
 
    <li>ul 2 ListItem 4</li> 
 
    <li>ul 2 ListItem 5</li> 
 
</ul> 
 
<ul> 
 
    <li>ul 3 ListItem 1</li> 
 
    <li>ul 3 ListItem 2</li> 
 
    <li>ul 3 ListItem 3</li> 
 
    <li>ul 3 ListItem 4</li> 
 
    <li>ul 3 ListItem 5</li> 
 
</ul> 
 
<ul> 
 
    <li>ul 4 ListItem 1</li> 
 
    <li>ul 4 ListItem 2</li> 
 
    <li>ul 4 ListItem 3</li> 
 
    <li>ul 4 ListItem 4</li> 
 
    <li>ul 4 ListItem 5</li> 
 
</ul>

來源

2017-10-12 21:16:13

CSS樣式的無序列表

回答

例

相關問題