0
이 목록에는 padding: 0; margin-left: 10px이 있습니다. 글 머리 기호는 왼쪽 여백에 잘 나타나게됩니다. 그러나 height: 800px; overflow-y: hidden을 추가하면 글 머리 기호가 갑자기 사라집니다. 왜? overflow-y이 요소의 왼쪽 여백에 나타나는 것에 영향을주는 이유가 없습니다.목록의 높이를 변경하면 글 머리 기호가 사라지는 이유는 무엇입니까?
아래 예제에서는 추가 규칙이 자바 스크립트에 적용되지만 이는 관련이 없습니다 (연습의 최종 목표 설명은 제외). 직접 적용해도 마찬가지입니다.
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>
HTTP ://stackoverflow.com/questions/9523059/setting-overflow-hides-li-bullets-overflow-property-conflict-with-list-style – j08691
흠. 그것은'li'에서'overflow-y'가 아니라'ul' 전체에서'overflow-y'입니다. 그리고 실제로 * 왜 * 오버 플로우 -y가 이런 행동을 할 것인지에 대한 질문에는 실제로 대답하지 않습니다, @ j08691. – TRiG
도움이 될지도 모르겠으나 대신 아래 답변을 참조하십시오. – j08691