CODEWITHSUNDEEP
htmlcsslist
VHS
VHS

Reputation: 73

CSS List padding not working

I try to pad each li within a list. the lines are actually padded, but the following element does not move (see the last line in the attached image).

The css snippets are:

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

Upvotes: 1

Views: 5150

Answers (1)

VvV
VvV

Reputation: 1588

You need to change style in <li> from display:inline to display:block or display:inline-block; padding doesn't apply when the element's display has 'inline';

So you need to change like below;

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

Upvotes: 5

Related Questions