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

您需要在＆lt; li＆gt;中更改样式从显示：内联到显示：块或显示：内联块; 当元素的显示具有＆＃39; inline＆＃39 ;;

时，填充不适用

所以你需要改变如下;

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