-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样式的无序列表

回答

例

相关问题