如何让每个ul的ul都有不同的边缘顶部

Question

我正在开发一个网站http://barrecertification.com/signup-options/。 我希望每个认证印章都采用阶梯式方法。我的意思是，第一个比第二个更有利于第二个。但问题是当我应用margin-top时，即使我对每个元素都有不同的类，所有元素都会获得相同的上限，如何做到这一点？

这是它看起来的形象

请帮忙

由于

Answer 1

问题是您使用的是display:inline-block。所有区块都将以线条形式展开。如果您将vertical-align:top添加到.package，则所有.package元素都会从顶部开始，然后您可以为每个margin-top添加不同的.package值。

.package {
    ...
    vertical-align:top;
}

.pac-1 { margin-top:80px; }
.pac-2 { margin-top:40px; }

Answer 2

为每个li

提供单词课程

.platinum{
   margin-top: 10px;
}

.gold{
   margin-top: 20px;
}


.silver{
   margin-top: 30px;
}

Answer 3

你可以这样做：

HTML

<li class="small">There put your content</li> ...

<li class="middle">There put your content 2</li> ...

<li class="high">There put your content 3</li> ...

CSS

.small {
 margin-top: "your value"px;
}

.middle {
 margin-top: "your value"px;
}

.high {
 margin-top: "your value"px;
}

希望对您有所帮助！ =）