Как мне добавить интервал в уль ли

Question

Пожалуйста, смотрите скрипку (http://jsfiddle.net/Jk6Bk/5/)

Я хотел бы добавить интервал между 'Леонардом' и 'Х' (кнопка удаления).

Я попытался margin-left в css для элемента ul li a, но, похоже, это не работает.

Я здесь упускаю что-то глупое, есть идеи, что это?

Answer 1

Все, что вам нужно сделать, это добавить margin-left к самому классу .button:

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

Обновлено jsFiddle .

Answer 2

Измените ваш селектор ul li a на ul li a.button
Селектор .button более специфичен, чем ul li a, и его поле имеет приоритет.

из html Dog: Specificity мы можем дать классам следующие веса:

1. .button вес: 10
2. ul li a вес: 3
3. ul li a.button вес: 13

Таким образом, указав класс myou, вы можете переопределить значение по умолчанию margin для .button class

Answer 3

Поля на кнопке .button перекрывают поля на a.Просто удалите правило поля из кнопки.

Answer 4

проверьте это здесь: 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>

выше я редактировал

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

Для каждого li я использовал его.Я надеюсь, ты понимаешь.спасибо

Answer 5

Пожалуйста, добавьте дисплей: блок; в вашем ul li CSS тогда будет работать только право на поле

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

    margin-left:20px;
}

Answer 6

Попробуйте вставить неразрывный пробел

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