Question

此列表包含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>

Answer 1

这是因为当你隐藏溢出时，content is clipped会溢出元素的content area。默认情况下，子弹被视为在内容区域之外＆＃34;。最简单的解决方案是在列表中使用CSS并设置list-style-position:inside;。

<强> jsFiddle example

另外，作为spec says：

＆＃34;在CSS 2.1中，UA可能会隐藏标记，如果元素溢出＆＃39;是除了＆＃39;可见＆＃39;。＆＃34;

Answer 2

溢出-y会隐藏子弹。我想最好的解释是子弹被认为是在元素之外。如果在开发人员工具中突出显示LI，您将看到子弹本身未突出显示。轻松修复：

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

Answer 3

应用此代码

.highlights li {list-style-position：inside;}

Answer 4

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

它也将解决你的问题

当我改变列表的高度时，为什么子弹点会消失？

4 个答案: