我正在网站上生成元素符号列表(通过使用 jquery 自动完成功能)和 我在网站中使用响应式网页设计。
我想在每个列表项后留一个空格。为此,我添加了以下 CSS:
li
{
margin-bottom:20px;
}
但是,当列表项(比如在移动设备上)有自动换行时,总行间距不会改变。
我没有在单词包装元素的底部和下一个元素之间获得适当的间距。
显示如下:
如何让间距看起来像这样:
我试着建立一个 jsfiddle,但无法让 jquery 自动完成(在我的应用程序中有效)的 css 工作,更不用说我添加的行间距的 css 了。
无论如何,这里是,供引用:
最佳答案
您熟悉 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;
}
关于具有响应式网页设计的列表中每个元素后的 CSS 间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22615814/