如何在 ul li 中添加间距答案

【问题标题】：How do I add spacing within an ul li如何在 ul li 中添加间距
【发布时间】：2011-07-20 15:45:48
【问题描述】：

请看小提琴 (http://jsfiddle.net/Jk6Bk/5/)

我想在“Leonard”和“X”（删除按钮）之间添加一些间距。

我在 ul li a 元素的 css 中尝试了 margin-left，但这似乎不起作用。

我在这里遗漏了一些愚蠢的东西，知道它是什么吗？

【问题讨论】：

可以在 li 元素上设置宽度吗？

标签： css html-lists spacing

【解决方案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。

【讨论】：

【解决方案2】：

将您的选择器 ul li a 更改为 ul li a.button
.button 选择器比 ul li a 更具体，并且它的边距被覆盖。

从html Dog: Specificity 我们可以给类赋予以下权重：

.button 体重：10
ul li a 体重：3
ul li a.button体重：13

因此，通过指定一个类，我可以覆盖 .button 类上的默认 margin

【讨论】：

@Arun 是的，它是一个不同的解决方案，指出了同样的问题。

【解决方案3】：

请添加显示：块；在你的 ul li 一个 CSS 中，只有右边的边距会起作用

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

    margin-left:20px;
}

【讨论】：

【解决方案4】：

.button 上的边距覆盖 a 上的边距。只需从 .button 中删除边距规则。

【讨论】：

【解决方案5】：

尝试输入non-breaking space

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

【讨论】：

虽然这可行，但通常更改 html 比找到 css 解决方案更糟糕。
添加 nbsp 不是解决方案，而是解决方法，99% 的问题都不需要。

【解决方案6】：

在这里查看：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。我希望你明白。谢谢

【讨论】：

一些解释或您更改的特定代码/标记将对 OP 有所帮助。
我已添加标签标签并应用样式 float:left 和 width:100px 进行分隔。
当你有 css 时，为每个元素添加样式并不是一个解决方案。