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

Question

Can I add a marker to the top of a specific item in a horizontal unordered list?

I created a cloud-themed navigation dashboard, but I don’t want all the clouds to be on one straight line, so I am trying to make sure that they are not on the same line.

None of these answers worked for me, it does not change the list items at all, so I added 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 decided to add the whole stylesheet, because there might be an error that could lead to the list item marker not working, although I cannot find any problems.

Thanks for the answers and comments so far.

It seems that changing the field of one element only works if there is a float in the list: to the left of it, you can center the list rather than float to the left to make it work?

Answer 1

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

• You can use the :nth-child() selector from CSS3. You put the li number that you want to configure in brackets (this method does not support IE8 and below):

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

• Set the class in 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 the requirements of a new question. This should do the trick: 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 Fiddle: http://jsfiddle.net/aH9ra/5/

Answer 3

Edit:

 #clouds ul, li{ display: inline; } 

in

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

This should allow you to use the top and bottom fields / fill in the way you are trying. (If you are having problems with Internet Explorer with a built-in unit, try translating the display and fields into <a> tags inside your list items ( #clouds ul li a ), since older versions of IE should interact with items that are built-in by default.

Also, is it assumed that #clouds ul, li has a comma in it? If so, you can remove the #clouds ul that follows it. However, as soon as you do this, it will turn all your list items into a row and provide you with a checkmark.

Answer 4

if you have static # navigation items you can use nth-child for their styles

so with this html:

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

use this css style:

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

Note: browser support for nth-child somewhat limited (IE9 +, Safari 3.1+, FF 3.5+, Chrome)