Html 最重要的事项

我有3个带有

display:block

的列表项。我希望偶数元素的位置稍微低一点，但当我尝试使用

边距顶部时

所有元素的位置都较低

.hero\uuu说明-右侧{
左边距：0px；
宽度：100%；
高度：自动；
边缘底部：20px；
}
.说明项目{
边际上限：0px；
显示：内联块；
位置：相对位置；
明确：两者皆有；
}
.说明\u项目：最后一个孩子{
边缘底部：0px；
}
.说明\u项：第n个子项（2n）{
左边距：0px；
边缘顶部：20px；
}

#正文


#正文


#正文

如果我能理解你的问题，在适当的代码片段中，它基本上是有效的。最大的问题似乎是，

li

元素不属于

div

内部-它们需要位于

ul

或

ol

元素内部

.hero\uuu说明-右侧{
左边距：0px；
宽度：100%；
高度：自动；
边缘底部：20px；
}
.说明项目{
边际上限：0px
显示：内联块；
位置：相对位置；
明确：两者皆有；
}
.说明\u项目：最后一个孩子{
边缘底部：0px；
}
.说明\u项：第n个子项（2n）{
左边距：0px；
利润上限：200px；
}

#正文


#正文


#正文

似乎您只想直观地移动偶数元素-在这种情况下，最好使用

transform:translate

而不是边距（这是因为

margin

影响文档流中的其他元素，而transform只是直观地移动它们），例如：

ul{
列表样式：无；
保证金：0；
填充：0；
}
李{
显示：内联块；
}
李：第n个孩子（偶数）{
变换：translateY（5px）；
}

项目1
项目2
项目3
项目4
项目5

请澄清您的具体问题或添加其他详细信息，以突出显示您所需的内容。正如目前所写的，很难准确地说出你在问什么。寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是在一个简单的文本中。请参阅快速标注-我试图记住确切的错误，但我记得在使用

translateY

时出现了问题，需要使用

translate（0,5px）

，以实现完全的浏览器兼容性。这可能是动画制作的时候，不过，那是很久以前的事了。@jmcgriz Fair point，尽管我不熟悉这个问题。如果你找到一个参考，请随意编辑！作为旁注：将变换替换为边距顶部并添加

垂直对齐：顶部

，然后它将工作。。。