在列表之间放置空格答案

【问题标题】：Put space between lists在列表之间放置空格
【发布时间】：2015-09-05 15:10:25
【问题描述】：

我有两个想要组合在一起的列表，但我希望它们之间有一些空间，比如一两个空格。这是我的jsFiddle。我尝试了几种解决方案，例如this，但都没有真正奏效。

这是我的 CSS：

ol {
    display: inline-block;
}
ol.ui-listview>li>.ui-btn:first-child:before, ol.ui-listview>li.ui-li-static:before, ol.ui-listview>li.ui-field-contain>label:before, ol.ui-listview>li.ui-field-contain>.ui-controlgroup-label:before{
    content: counter(listnumbering) !important;
}

#slots {
    text-align: center;
}

【问题讨论】：

你不是在寻找类似 ol{margin-right:20px;} 的东西吗？
@kurt 就是这样！将!important 添加为关键字即可。
谢谢，我已将其添加为答案。

标签： jquery css listview jquery-mobile

【解决方案1】：

添加一个margin-right css属性...

ol{
  margin-right:20px !important;
  }

【讨论】：

Kurt 我接受了 Harry 的回答，因为它更针对 jQuery mobile，但您当然值得 +1。

【解决方案2】：

您需要添加一个margin-right 以在两个ol 元素之间添加空格，因为它们显示为内联块元素。

但是，通用的 ol 选择器无济于事，因为库中的其他 CSS 规则正在覆盖它，因此您可以使用以下更具体的选择器，因此不会被覆盖。

.ui-block-a ol[data-role="listview"]{
    margin-right: 16px; 
}

注意：添加!important 关键字通常是一种不好的做法，应尽可能避免。这里不需要，因为选择器更具体。

Fiddle Demo（sn-p 好像失去了样式）

【讨论】：

什么意思 sn-p 似乎失去了样式？其实我不知道什么是sn-p。我的意思是你的解决方案很好！ :)
@gsamaras：在 SO 中有一个 stack sn-p 选项，可以通过单击工具栏上的 <> 图标来添加可运行的 HTML/CSS/JS 代码。这通常允许所有外部库也包括在内，但由于某种原因似乎在这里不起作用。小提琴按预期完美工作:)