CSS-Liste Padding funktioniert nicht

Question

Ich versuche, jede li innerhalb einer Liste zu pad. Die Linien sind tatsächlich gepolstert, aber das folgende Element bewegt sich nicht (siehe letzte Zeile im angehängten Bild).

Die CSS-Schnipsel sind:

$(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

Sie müssen > von der Anzeige in < li Stil ändern: inline zu display: block oder display: inline-block ; padding gilt nicht, wenn die Anzeige des Elements 'inline' hat;

Sie müssen also wie folgt ändern;

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