html - 列表项的独立边距

Question

正如您在这个 fiddle 中看到的:http://jsfiddle.net/h0qu4ffv/我将 1 个列表项的 margin-top 设置为 50px，但它们都遵循这种样式。

我怎样才能为每个列表项设置独立的边距，或者更好的是，正确的方法是什么才能使每个元素的无序水平列表具有不同的距离(例如，距顶部)？

Answer 1

您是否尝试过制作position:relative，然后使用top调整元素

<ul>
 <li>
    Item 1
 </li>
 <li id="seconditem">
    Item 2
 </li>
 <li id="lastitem">
    Item 3
 </li>
</ul>

然后是你的CSS

ul {
list-style-type: none;
border: 2px solid black;
}

ul li {
display: inline-block;
border: 2px solid green;
position: relative;
}

#lastitem {
top: 30px;
}
#seconditem {
top: 50px;
}