根据CSS中的计数器值设置边距（缩进） [英] Set margin (indent) based on counter value in CSS

问题描述

我想知道是否可以使用CSS3基于计数器的值设置元素 margin-left 。

I'm wondering whether it is possible to set the element margin-left based on the value of a counter, using CSS3.

换句话说，拥有这样的HTML：

In other words, having a HTML like this:

<section>A</section>
<section>B</section>
<section>C</section>

有 margin-left：0em ，第二个与 1em 等。

到目前为止，我试过以下： p>

So far, I have tried the following:

section
{
    counter-increment: sect-indent;
    margin-left: calc(counter(sect-indent) * 1em);
}

但看起来 calc c $ c>不支持获取计数器值。

But it seems that calc() doesn't support getting counter values.

使用CSS3是可能的吗？我对涉及ECMAScript的解决方案不感兴趣。

Is such a thing possible using CSS3? I'm not interested in solutions involving ECMAScript.

推荐答案

小集

$ b b

如果你正在处理一个小的节元素（如你的示例所示），那么使用相邻的兄弟选择器（或 nth-of-type 如果只需要CSS3支持）将让你想要的不计算。但是，可能超过大约五个元素和css可能会太麻烦，所以如果你正在查看这个数百个元素，这是不实际的。

For a Small Set

If you are dealing with a small set of section elements next to each other (as your sample shows), then using the adjacent sibling selector (or nth-of-type if only CSS3 support is desired) will get you what you want without counting. However, probably much more than about five elements and the css could get too cumbersome, so if you are looking at this for hundreds of elements, it is not practical.

section { margin-left: 0}
section + section {margin-left: 1em}
section + section + section {margin-left: 2em}

这篇关于根据CSS中的计数器值设置边距（缩进）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！