CSSリストのパディングが機能しない

Question

私は各リストに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; 
 
}

Answer 1

あなたは、ディスプレイから<李>でスタイルを変更する必要があります。表示にインライン：ブロックまたは表示：インラインブロック; 要素の表示に「インライン」がある場合、パディングは適用されません。

以下のように変更する必要があります。

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