18910140161

HTML-CSS中有序列表行的第n个子级(奇数)。-堆栈溢出

顺晟科技

2022-10-18 13:36:17

112

我尝试将nth-child(odd)应用于有序列表行,但它不能覆盖所有的行宽。有什么建议吗?。

<代码>Li{字体系列:衬线;字体大小:20px;位置:相对;填充:20px 0px 10px 20px;左边距:40px;}李:第n个孩子(奇数){背景颜色:紫色;}


顺晟科技:

您可以尝试添加";显示:块;";属性设置为Li元素。

<代码>Li{字体系列:衬线;显示:块;字体大小:20px;位置:相对;填充:20px 0px 10px 20px;左边距:40px;}

您可以使用li{ font-family: serif; font-size: 20px; position: relative; padding: 20px 0px 10px 20px; margin-left: 40px; } li:nth-child(odd){ background-color: violet; }表示项目符号将位于列表项内。因为它是列表项的一部分,所以它将成为文本的一部分,并将文本推到开头

此外,li { font-family: serif; display: block; font-size: 20px; position: relative; padding: 20px 0px 10px 20px; margin-left: 40px; } 标记的默认>填充可以通过注释代码删除。

<代码>/*UL{保证金:0;填充:0;}*/李{字体系列:衬线;字体大小:20px;位置:相对;填充:20px 0px 10px 20px;左边距:40px;list-style-position:内部;}李:第n个孩子(奇数){背景颜色:紫色;}
<代码><;UL>;<;Li>;文本1<;/Li>;<;Li>;文本2<;/Li>;<;Li>;文本3<;/Li>;<;Li>;文本4<;/Li>;<;Li>;文本5<;/Li>;<;/UL>;

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航