Question

正如你在这个小提琴中看到的那样：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;
}

Answer 2

您可以使用:nth-child

Js Fiddle

ul li:nth-child(1) {
    margin-top:50px;

}

Answer 3

在列表的每个元素上使用不同样式的唯一方法是为每个元素定义不同的样式。像这样：

<ul>
    <li style="margin-top: margin1">
        Item 1
    </li>
    <li style="margin-top: margin2">
        Item 2
    </li>
    <li style="margin-top: margin3">
        Item 3
    </li>
</ul>

列表项的独立保证金

3 个答案: