CSS интервал после каждого элемента в списке с адаптивным веб-дизайном

Question

Я создаю маркированный список на веб-сайте (с помощью функции автозаполнения jquery) и использую адаптивный веб-дизайн на веб-сайте.

Я хочу пробел после каждого элемента списка. Я добавил следующий CSS для этого:

 li
 {
    margin-bottom:20px;       
 }

Однако при переносе слов в элементе списка (например, на мобильном устройстве) общий межстрочный интервал не изменяется.

Я не получаю правильное расстояние между нижней частью завернутого слова и следующим элементом.

Дисплей выглядит так:

Как я могу получить интервал, чтобы выглядеть так:

Я попытался установить jsfiddle, но не могу заставить работать css для автозаполнения jquery (который работает в моем приложении), не говоря уже о css для добавленного междурядья.

Вот это все равно, к вашему сведению:

http://jsfiddle.net/2hwn4/

Answer 1

Вы знакомы со спецификой CSS? http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Если ваш код похож на скрипку, которую вы опубликовали, проверьте 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;
}