Question

是否可以在水平无序列表中的特定项的顶部添加边距？

我制作了一个以云为主题的导航栏，但我不希望所有的云都在一条直线上，所以我试图让它们不是一条直线。< / p>

这些答案都没有对我有用，它根本不会改变列表项，所以我在这里添加了一些代码：

HTML：

<div id="clouds">
    <ul>
        <li id="home"><a href="#"><img src="buttons/home.png"></a></li>
        <li id="info"><a href="#"><img src="buttons/Info.png"></a></li>
        <li id="designs"><a href="#"><img src="buttons/Designs.png"></a></li>
        <li id="contact"><a href="#"><img src="buttons/Contact.png"></a></li>
    </ul>
</div>

CSS：

body{
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(94,132,19)),
        color-stop(0.6, rgb(124,180,34)),
        color-stop(0.6, rgb(252,253,255)),
        color-stop(1, rgb(117,178,209))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(94,132,19) 0%,
        rgb(124,180,34) 60%,
        rgb(252,253,255) 60%,
        rgb(117,178,209) 100%
    );
    min-height: 500px;    
    text-align: center;
    background-position: absolute;
}
#sun{
    height: 72px;
    width: 72px;
    float: right;
    background-image: url('sun.png');
}

/*---NAVIGATION---*/
#home img:hover{
    background-image: url('buttons/home.png');
}
#info img:hover{
    background-image: url('buttons/info.png');
}
#designs img:hover{
    background-image: url('buttons/designs.png');
}
#contact img:hover{
    background-image: url('buttons/contact.png');
}
#clouds ul, li{
    display: inline;
    margin: 40px;
}
#clouds ul{
    display: inline;
}
/*---NAVIGATION END---*/

#wrap h1{
    margin-top: 175px;
    font-family: code bold;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 5px #000;
}
#wrap{
    font-family: code bold;
    color: white;
    text-shadow: 2px 2px 5px #000;
    width: 500px;
    text-align: center;
    margin: 0 auto;
}
#text{
    font-family: kartika;
    font-size: 22;
    -moz-column-count: 2;
    -moz-column-gap: 3em;
    -moz-column-rule: 1px dashed fff;
    -webkit-column-count: 2;
    -webkit-column-gap: 3em;
    -webkit-column-rule: 1px dashed fff;
}

我决定添加整个样式表，因为可能会出现错误，导致列表项边距不起作用，尽管我似乎找不到任何问题。

感谢目前为止的答案和评论。

似乎更改单个项目的边距仅在列表具有浮动时有效：向左移动，可以将列表居中而不是将其浮动到左侧以使其工作？

Answer 1

我有两个解决方案：http://jsfiddle.net/8avbq/5/

您可以使用CSS3中的:nth-child()选择器。您将要放置的li的编号放在括号中（但此方法不支持IE8及以下版本）：
```
ul li:nth-child(2){
     margin-top:15px;
     background: red;
}
```

在li上设置课程：

<强> HTML：

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li class="extra">4</li>
   <li>5</li>
</ul>

<强> CSS：

ul li.extra{
    margin-top:15px;
}

编辑：根据新的问题要求。这应该可以解决问题：http://jsfiddle.net/A8mAY/7/

Answer 2

HTML：

<ul>
   <li>item 1</li>
   <li>item 2</li>
   <li class="certain_item">item 3</li>
   <li>item 4</li>
   <li>item 5</li>
   <li>item 6</li>
</ul>

CSS：

ul li
{
    float:left;
}

ul li.certain_item
{
    margin-top:15px;
}

JS小提琴：http://jsfiddle.net/aH9ra/5/

Answer 3

变化：

#clouds ul, li{
    display: inline;
}

为：

#clouds ul, li{
    display: inline-block;
}

这应该允许您按照您尝试的方式使用顶部和底部边距/填充。（如果您遇到带有内联块的Internet Explorer问题，请尝试将显示和边距转移到列表项（<a>）内的#clouds ul li a标记，因为旧版本的IE应该与元素配合使用默认为内联。

另外，#clouds ul, li是否应该包含逗号？如果是这样，那么您可以删除它后面的#clouds ul。但是，正如您所拥有的那样，它将内联所有列表项并为其提供保证金。

Answer 4

如果您有静态导航项目，可以使用nth-child设置样式

所以这个html：

<ul id="nav">
    <li><a href="#">Nav Item 1</a></li>
    ...
</ul>

使用此css样式：

#nav :nth-child(1) { margin: 8px; }
#nav :nth-child(2) { margin: 5px; }
#nav :nth-child(3) { margin: 3px; }
#nav :nth-child(4) { margin: 12px; }
#nav :nth-child(5) { margin: 6px; }

注意： nth-child的浏览器支持有限（IE9 +，Safari 3.1 +，FF 3.5 +，Chrome）

向水平列表中的单个列表项添加边距

4 个答案: