CODEWITHSUNDEEP
csshtml-listsspacing
Arun
Arun

Reputation: 23

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 the '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?

Upvotes: 2

Views: 1820

Answers (6)

Shadow Wizard
Shadow Wizard

Reputation: 66389

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.

Upvotes: 2

Mr.T.K
Mr.T.K

Reputation: 2356

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

Upvotes: 0

SystemRaen
SystemRaen

Reputation: 855

Try putting in a non-breaking space

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

Upvotes: 0

John Stimac
John Stimac

Reputation: 5491

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

Upvotes: 0

James Khoury
James Khoury

Reputation: 22319

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

Upvotes: 1

rkaartikeyan
rkaartikeyan

Reputation: 2007

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

Upvotes: 0

Related Questions