放置列表之間的空間

我有兩個列表，我想要分組在一起，但我會讓他們之間有一些空間，像一個或兩個空格。這是我的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; 
}

來源

2015-09-05 gsamaras

您arn't尋找類似OL {保證金-right：20px;}？ – kurt

@kurt就是這樣！將'！important'添加爲關鍵字，它將起作用。 – gsamaras

謝謝，我已經將它添加爲答案。 – kurt

您需要添加一個margin-right爲它們顯示爲內聯塊元素兩個ol元素之間添加空間。

但是，通用的ol選擇器不會幫助，因爲庫中的其他CSS規則會覆蓋它，因此您可以使用下面的選擇器，因爲它更具體，因此不會被覆蓋。

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

注：添加一個!important關鍵字通常是一個壞的做法，應儘可能避免。這裏不需要，因爲選擇器更具體。

Fiddle Demo（片段似乎失去造型）

來源

2015-09-05 15:20:35 Harry

你是什麼意思片段似乎失去了造型？其實我不知道什麼是片段。我的意思是你的解決方案很好！ :) – gsamaras

@gsamaras：在SO中有一個堆棧片段選項，通過點擊工具欄中的<>圖標來添加可運行的HTML/CSS/JS代碼。這通常允許包含所有外部庫，但由於某種原因似乎不適用於此。小提琴完美的按計劃完成:) – Harry

哦，那件事，是的，我知道！謝謝。 – gsamaras

添加保證金右CSS屬性...

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

來源

2015-09-05 15:26:47 kurt

Kurt我接受了Harry的回答，因爲它更專注於jQuery mobile，但當然你應該得到+1。 – gsamaras

放置列表之間的空間

回答

相關問題