2017-02-15 8 views
0

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

устанавливаемых сотовые фрагментов являются:

$(function() { 
 
     var pull = $('#pull'); 
 
     menu = $('nav ul'); 
 
     menuHeight = menu.height(); 
 

 
     $(pull).on('click', function(e) { 
 
     e.preventDefault(); 
 
     menu.slideToggle(); 
 
     }); 
 

 
     $(window).resize(function() { 
 
     var w = $(window).width(); 
 
     if (w > 320 && menu.is(':hidden')) { 
 
      menu.removeAttr('style'); 
 
     } 
 
     }); 
 
    }
nav { 
 
    height: 100%; 
 
    width: 150px; 
 
    font-family: 'Helvetica Neue LT Pro', sans-serif; 
 
    background: #fff; 
 
    font-size: 11pt; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    border-bottom: 0; 
 
    z-index: 999; 
 
    margin: 80px 0px 0px 100px; 
 
    background-color: orange; 
 
} 
 
nav ul { 
 
    padding: 68px 0px 0px 0px; 
 
    margin: 0 auto; 
 
    width: 200px; 
 
    display: none; 
 
    height: auto; 
 
    background-color: red; 
 
} 
 
nav li { 
 
    display: inline; 
 
    background-color: yellow; 
 
    padding-bottom: 20px; 
 
}

image

+1

Можете ли вы рассказать об этом как фрагмент кода или JSFiddle? –

+1

Можете ли вы также показать html? Если бы это была ваша основная ul в nav, она была бы невидимой (учитывая CSS в вопросе). –

ответ

0

Вы должны изменить стиль в < литии > от дисплея: встроенный в дисплей: блок или дисплей: встроенный блок ; прокладка не применяется, когда дисплей элемента имеет «встроенный»;

Поэтому вам нужно изменить, как показано ниже;

nav li { 
    display: inline-block; 
    background-color: yellow; 
    padding-bottom: 20px; 
} 
+0

thx. это сработало. – VHS

Смежные вопросы