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

Question

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

我已经制作了一个以云为主题的导航栏,但我并不希望所有的云都是一条直线,所以我试图让它们不是一条直线.

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

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/

1. 您可以使用:nth-child()CSS3中的选择器.你把li你想要的目标号码放在括号中(这种方法不支持IE8及以下):

   ul li:nth-child(2){
        margin-top:15px;
        background: red;
   }
   

2. 在上面设置一个类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/