css - 具有响应式网页设计的列表中每个项目后的 CSS 间距

Question

我正在网站上生成一个项目符号列表（通过使用 jquery 自动完成功能），并在网站中使用响应式网页设计。

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

 li
 {
    margin-bottom:20px;       
 }

但是，当列表项（例如在移动设备上）有自动换行时，总行距不会改变。

我没有在 word 包装项目的底部和下一个项目之间获得适当的间距。

显示如下：

在此处输入图像描述

我怎样才能让间距看起来像这样：

在此处输入图像描述

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

无论如何，这里是，仅供参考：

score 1 · Accepted Answer

如果您的代码就像您发布的小提琴，检查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;
}

1 回答 1