Question

我想要将两个列表组合在一起，但是我希望它们之间有一些空格，比如一两个空格。这是我的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;
}

Answer 1

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

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

Answer 2

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

然而，通用ol选择器无法帮助，因为库中的其他CSS规则会覆盖它，因此您可以使用下面的选择器，它更具体，因此不会被覆盖。

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

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

Fiddle Demo（片段似乎失去了样式）

在列表之间放置空格

2 个答案: