How do I add spacing within an ul li

Please see the fiddle (http://jsfiddle.net/Jk6Bk/5/)

I would like to add some spacing between 'Leonard' and th开发者_如何学Pythone 'X' (delete button).

I tried margin-left in the css for ul li a element, but that does not seem to work.

I'm missing something stupid here, any idea what it is?

All you need to do is add margin-left to the .button class itself:

.button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin-left: 50px;
    ...
}

Updated jsFiddle.

Change your selector ul li a to ul li a.button
The .button selector is more specific than ul li a and its margin is overriding.

from html Dog: Specificity we can give the classes the following weights:

1. .button weight: 10
2. ul li a weight: 3
3. ul li a.button weight: 13

So by specifying a class myou can override the default margin on the .button class

Please Add display:block; in your ul li a CSS then only the margin right will be work

ul li a{
    float:right;
    display:block;

    margin-left:20px;
}

The margin on .button is overriding the margin on the a. Just remove the margin rule from .button.

Try putting in a non-breaking space

<li>Leonard &nbsp;&nbsp; <input type='image' src='x.png'></li>

check it here: http://jsfiddle.net/thilakar/Jk6Bk/10/

<li class="ui-state-default cloneable"><label style="float:left; width:100px;">Bob</label><span class="ss"><a href="#" class="button small bigrounded red" onclick="removePersonFromList(this);return false;">X</a></span></li>


                <li class="ui-state-default cloneable"><label style="float:left; width:100px;">Leonard</label><span><a href="#" class="button small bigrounded red" onclick="removePersonFromList(this);return false;">X</a></span></li>


                    <li class="ui-state-default cloneable"><label style="float:left; width:100px;">Boris</label><span><a href="#" class="button small bigrounded red" onclick="removePersonFromList(this);return false;">X</a></span></li>

above i have edited

<label style="float:left; width:100px">your content</label><span>your content</span>

For every li i have used it. i hope you understand. thanks