html - 使用交替的列表样式图像并排列出元素

Question

我正在尝试操作一个列表来并排列出元素，这是我通过使用 float 完成的，但这会导致问题，因为无法为用户自动清除 float 。此列表将自动创建，用户无法控制代码，因此列表将只是 <ul><li>Item</li></ul>没有办法为用户清除 float ，所以也许使用 float 不是最好的选择？我愿意接受其他建议。

此外，我想为左侧的所有元素使用一个列表样式的图像，为右侧的所有元素使用一个图像。我确实尝试使用 :nth-of-type(1)和 :nth-of-type(2)但这只是将图像添加到第一个和第二个，我不知道在 CSS 中说“每个其他”的方法。

我做了一个 fiddle ，让它更容易看:

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

编辑:此外，使用此方法似乎将列表样式图像的文本对齐到底 Angular ，如果可能的话，我想将文本对齐到顶 Angular 吗？

Answer 1

您可以使用第 n 个子选择器。

.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");
}