爲什麼當我改變列表的高度時，子彈點會消失？

此列表有一個padding: 0; margin-left: 10px。子彈點正常工作，出現在左邊界。但是，當我添加height: 800px; overflow-y: hidden時，子彈點突然消失。爲什麼？我看不到爲什麼overflow-y會影響出現在元素左邊界的任何內容。爲什麼當我改變列表的高度時，子彈點會消失？

在下面的示例中，附加規則與javascript一起應用，但這不相關（除了說明練習的最終目標）。如果我直接應用它們，情況也是如此。

尋找這個發現我很多例子的子彈點消失與overflow: hidden，這是可以理解的，但我無法明白爲什麼這些問題適用於overflow-y，我也不能找到任何人遇到此問題。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Test List</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-darkness/jquery-ui.css" type="text/css" media="all"> 

<style> 
.highlights { 
    margin-left: 10px; 
    width: 500px; 
    padding: 0; 
} 
</style> 

<script> 
$(document).ready(
    function() { 
     var $h = $('ul.highlights'); 
     if ($h.height() > 800) { 
      $h.css('overflow-y', 'hidden'); 
      $h.css('height', '800px'); 
      var expand = document.createElement('span'); 
      expand.innerHTML = 'Show all'; 
      $h.after(expand); 
      $(expand).click(
       function() { 
        $h.hide().css('height', 'auto').slideDown(); 
        $(this).hide(); 
       } 
      ); 
     } 
    } 
); 
</script> 

</head> 
<body> 

<ul class="highlights"> 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> 
<li>Duis luctus ex neque, quis lobortis dui efficitur ac.</li> 
<li>In ornare iaculis sapien, id faucibus erat vestibulum sit amet.</li> 
<li>Suspendisse odio erat, suscipit vel sem et, gravida pretium felis.</li> 
<li>Vestibulum finibus ex lacus, sit amet bibendum nunc auctor efficitur.</li> 
<li>Donec in diam imperdiet, posuere velit sed, auctor nulla.</li> 
<li>Duis at lorem arcu.</li> 
<li>Maecenas in velit id magna congue commodo.</li> 
<li>Integer congue nunc hendrerit, lobortis ligula at, finibus tortor.</li> 
<li>Donec euismod, tellus ut sollicitudin consequat, elit nulla imperdiet dui, eu aliquet odio magna id felis.</li> 
<li>In varius a turpis eu ornare.</li> 
<li>Proin eu pharetra felis.</li> 
<li>Nunc tempus odio lectus, non molestie eros facilisis aliquet.</li> 
<li>Aenean magna urna, ultricies ac faucibus sit amet, viverra ut ante.</li> 
<li>Proin ornare lacinia nisi vitae aliquam.</li> 
<li>Morbi at enim ut erat tempor hendrerit.</li> 
<li>Donec suscipit id massa feugiat placerat.</li> 
<li>Aliquam luctus maximus lectus, id rutrum ligula tincidunt vel.</li> 
<li>Sed vehicula tellus in nunc sagittis vulputate.</li> 
<li>Integer bibendum quam sit amet lacinia dignissim.</li> 
<li>Etiam ultricies ultricies nibh elementum fermentum.</li> 
<li>Ut vitae risus lectus.</li> 
<li>Mauris ac convallis sapien, quis euismod arcu.</li> 
<li>Vestibulum viverra erat a lacinia molestie.</li> 
<li>Fusce et turpis molestie, pretium ex varius, consectetur orci.</li> 
<li>Curabitur eu diam in tellus tempus pretium.</li> 
<li>In accumsan tortor nec congue placerat.</li> 
<li>Duis laoreet rhoncus libero eget posuere.</li> 
<li>In lacinia, dolor sed fringilla ultrices, diam eros pulvinar ligula, non maximus enim orci vel diam.</li> 
<li>Praesent sollicitudin libero augue, nec pretium mauris luctus id.</li> 
<li>Proin id turpis auctor, lacinia nunc et, pretium orci.</li> 
<li>Nulla vel eleifend leo, sed fringilla ligula.</li> 
<li>Maecenas convallis arcu ac gravida ornare.</li> 
<li>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada dui et urna vulputate pharetra.</li> 
<li>Maecenas eu dictum orci.</li> 
<li>Morbi auctor finibus pretium.</li> 
<li>Nam consequat luctus vehicula.</li> 
<li>Phasellus eu arcu sed ipsum ultricies mollis.</li> 
<li>Etiam at porttitor est.</li> 
<li>Nulla pellentesque pretium tempus.</li> 
<li>Cras molestie pharetra sem eu iaculis.</li> 
<li>Nam consequat, arcu id tincidunt pretium, sem ipsum interdum est, non pellentesque felis eros sit amet lectus.</li> 
<li>Nulla laoreet congue elit, non aliquam orci rutrum a.</li> 
<li>Aenean fringilla consequat nisi, tempus dictum libero finibus sed.</li> 
<li>Suspendisse eget ligula quam.</li> 
<li>Nulla in ornare turpis.</li> 
<li>Donec sit amet eros at tortor fermentum aliquet.</li> 
<li>Etiam semper eleifend ante non vehicula.</li> 
<li>Sed id diam erat.</li> 
<li>Pellentesque laoreet gravida finibus.</li> 
<li>Vivamus maximus ornare mi, ut gravida leo tincidunt vel.</li> 
<li>Mauris congue laoreet imperdiet.</li> 
<li>In hac habitasse platea dictumst.</li> 
</ul> 

</body> 
</html>

來源

2014-09-03 TRiG

HTTP：/ /stackoverflow.com/questions/9523059/setting-overflow-hides-li-bullets-overflow-property-conflict-with-list-style – j08691 2014-09-03 14:01:49

嗯。這是'li'上的'overflow-y'，而不是整個'ul'。它實際上並沒有回答*爲什麼*'overflow-y'會有這種行爲，@ j08691。 – TRiG 2014-09-03 14:04:15

認爲它可以幫助你，但請參閱下面的答案。 – j08691 2014-09-03 14:07:11

這是因爲，當你隱藏溢出，content is clipped溢出時將其元素的content area。默認情況下，項目符號被認爲是在「內容區域」之外。最簡單的解決方案是在列表上使用CSS並設置list-style-position:inside;。

jsFiddle example

此外，作爲spec says：「如果元素的 '溢出' 是比 '可見的' 其他在CSS 2.1，UA可以隱藏標記。」

來源

2014-09-03 14:06:55 j08691

好的解決方案，但是，如果文本在多行上，它不會縮進子彈下面。 – Jason 2014-09-03 14:08:29

@Jason - 如果你在列表中使用溢出，恐怕就是這樣。 – j08691 2014-09-03 14:09:32

保證金可以避免這個問題。 – Jason 2014-09-03 14:11:43

溢出y會隱藏子彈。我想最好的解釋是子彈被認爲是在元素之外。如果您在開發人員工具中突出顯示LI，則會看到子彈本身未突出顯示。簡單的解決辦法壽：

.highlights li { 
    margin-left: 1em; 
}

來源

2014-09-03 14:07:27 Jason

使用這個代碼

.highlights李{列表樣式位置：內;}

來源

2014-09-03 14:10:57 Venk

$h.css('padding-left', '20px');

它也將解決你的問題

來源

2014-09-03 14:14:40 himanshu

爲什麼當我改變列表的高度時，子彈點會消失？

回答

相關問題