具有响应式网页设计的列表中每个元素后的 CSS 间距

Question

我正在网站上生成元素符号列表(通过使用 jquery 自动完成功能)和我在网站中使用响应式网页设计。

我想在每个列表项后留一个空格。为此，我添加了以下 CSS:

 li
 {
    margin-bottom:20px;       
 }

但是，当列表项(比如在移动设备上)有自动换行时，总行间距不会改变。

我没有在单词包装元素的底部和下一个元素之间获得适当的间距。

显示如下:

如何让间距看起来像这样:

我试着建立一个 jsfiddle，但无法让 jquery 自动完成(在我的应用程序中有效)的 css 工作，更不用说我添加的行间距的 css 了。

无论如何，这里是，供引用:

http://jsfiddle.net/2hwn4/

Answer 1

您熟悉 CSS 特异性吗？ http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

如果您的代码与您发布的 fiddle 一样，检查自动完成中的 li 元素将向您显示正在应用以下属性(来自 jquery ui css 文件):

.ui-menu .ui-menu-item {
    margin: 0;
    padding: 0;
    zoom: 1;
    width: 100%;
}

这个规则比你的规则更具体

li
 {
    margin-bottom:20px;       
 }

因此，实际应用的底部边距为 0。要解决此问题，您可以执行 margin-bottom: 20px !important;(*不推荐)，或使用相同的选择器覆盖 jquery ui(假设您的 CSS 在 jquery ui css 之后加载)像这样:

.ui-menu .ui-menu-item {
   margin-bottom: 20px;
}