Question

我试图操纵列表并排列出项目，这是我通过使用浮点数完成的，但这会导致问题，因为无法自动清除用户的浮点数。此列表将自动创建，用户无法控制代码，因此列表只是<ul><li>Item</li></ul>没有为用户清除浮动的方式，因此可能使用浮动不是最好的选择吗？我对其他建议持开放态度。

另外，我想为左侧的所有项目使用一个列表样式的图像，为右侧的所有项目使用一个图像。我确实尝试使用:nth-of-type(1)和:nth-of-type(2)但是只将图像添加到第一个和第二个，我不知道如何说出每一个＆＃34;其他所有＆＃34;在CSS。

我做了一个小提琴，让它更容易看到：

https://jsfiddle.net/nywmxkur/1/

编辑：此外，使用此方法似乎将列表样式图像的文本与底角对齐，我想将文本对齐到顶角，如果这样做的话。可能的？

Answer 1

您可以使用nth-child选择器。

.pagecontent li:nth-child(2n + 1) {
    list-style: square inside url("http://www.illstudios.com/bullet1.png");
}
.pagecontent li:nth-child(2n + 0) {
    list-style: square inside url("http://www.illstudios.com/bullet2.png");
}

Answer 2

nth-child(2n)（docs）怎么样？您甚至可以使用2n定位项目，使用2n + 1定位奇数项目。

请将此更新发送给您的小提琴： https://jsfiddle.net/nywmxkur/2/

使用交替的列表样式图像并排列出项目

2 个答案: