Adding a margin to a single list item in a horizontal list

Question

Is it possible to add a margin to the top of a certain item in a horizontal unordered list?

I've made a cloud-themed navigation bar, but I don't want all the clouds to be all in one straight line, so I'm trying to make it so they aren't all in one line.

None of these answers have worked for me, it doesn't change the list items at all, so I've added some of the code here:

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;
}

I've decided to add the whole of my stylesheet because there might be an error in there somewhere that might be causing the list item margin to not work, although I can't seem to find any problems.

Thanks for the answers and comments so far.

It seems changing the margin of a single item only works if the list has float: left to it, it is possible to center the list instead of floating it to the left to make it work?

Answer 1

I have two solutions for you: http://jsfiddle.net/8avbq/5/

1. You can use the :nth-child() selector from CSS3. You put the number of the li you want to target in the brackets (This method will not support IE8 and below though):

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

2. Set a class on the 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;
   }
   

EDIT : Based on new question requirements. This should do the trick: http://jsfiddle.net/A8mAY/7/

Answer 2

Change:

#clouds ul, li{
    display: inline;
}

to:

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

That should allow you to use the top and bottom margins/padding the way you're trying to. (If you run into issues with Internet Explorer with inline-block, then try shifting the display and margins to the <a> tags inside your list items (#clouds ul li a), as old versions of IE should cooperate with elements that default to inline.

Also, is #clouds ul, li supposed to have the comma in it? If so, then you can remove the #clouds ul that follows it. As you have it, though, it will turn all your list items inline and give it the margin you have.