CSS列表填充不起作用

我嘗試填充列表中的每個li。這些線實際上是填充的，但以下元素不會移動（請參閱附加圖像中的最後一行）。CSS列表填充不起作用

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; 
 
}

來源

2017-02-15 VHS

你能分享它作爲運行代碼片段還是JSFiddle？ –

你也可以顯示html嗎？如果它只是你在導航中的基本ul，它將是不可見的（給定問題中的CSS）。 –

你需要從顯示在<李>改變風格：內聯爲display：block或顯示：inline-block的; 當元素的顯示「內聯」時，填充不適用;

所以你需要改變如下;

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

來源

2017-02-15 21:26:43 Victoria

thx。有效。 – VHS

CSS列表填充不起作用

回答

相關問題