html - CSS 中的 float 列表边距

Question

我有一个 320 像素宽的 div。我在左侧 float 列表项，每个项的宽度为 100 像素。然后我想在每个列表项的右边留出 10px 的右边距。所有其他边距和填充均已删除。

所以，在进入下一行之前，我基本上希望每行有 3 个列表项。但是因为在第 3 个元素(即所有元素)上有一个 margin-right，它会转到下一行(所以每行只有 2 个元素)。

有没有办法在这种情况下每行有 3 个元素，而无需创建额外的类或使用脚本。

Answer 1

使用 CSS3 selectors :

ul:nth-child(3n)   { margin-left: 0px; ... }
ul:nth-child(3n+1) { margin-left: 10px; ... }
ul:nth-child(3n+2) { margin-left: 10px; ... }

由于缺少 CSS3 支持，可能不实用。