Put space between lists

Question

I have two lists that I want to be grouped together, but I would them to have some space between them, something like one or two whitespaces. Here is my jsFiddle. I've tried several solutions found on questions like this, but none of them actually worked.

Here is my 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;
}

You arn't looking for something like ol{margin-right:20px;} ? — kurt, Sep 05 '15 at 15:17
@kurt that's it! Add `!important` as a keyword and it will work. — gsamaras, Sep 05 '15 at 15:19

score 3 · Answer 1 · answered Sep 05 '15 at 15:26

3

Add a margin-right css property...

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

answered Sep 05 '15 at 15:26

kurt

1,146
1
8
18

Kurt I accepted Harry's answer because it's more specific to jQuery mobile, but of course you deserve a +1. – gsamaras Sep 05 '15 at 15:33

score 2 · Accepted Answer · answered Sep 05 '15 at 15:20

2

You need to add a margin-right to add space between the two ol elements as they are displayed as inline block elements.

However a generic ol selector would not help as other CSS rules from libraries are overwriting it and so you can use the below selector which is more specific and hence wouldn't be overwritten.

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

Note: Adding an !important keyword is generally a bad practice and should be avoided wherever possible. Here it is not needed as the selector is more specific.

Fiddle Demo (snippet seems to lose the styling)

answered Sep 05 '15 at 15:20

Harry

87,580
25
202
214

What do you mean snippet seems to lose the styling? Actually I do not know what is a snippet. I mean your solution is fine! :) – gsamaras Sep 05 '15 at 15:25
@gsamaras: In SO there is a stack snippet option to add runnable HTML/CSS/JS code by clicking on the `<>` icon from toolbar. That generally allows for all external libraries also to be included but doesn't seem to work here for some reason. The fiddle works perfectly as intended :) – Harry Sep 05 '15 at 15:27

Put space between lists

2 Answers2