왜 디스플레이가 필요합니까? block

마크 업을 그대로 실행하면 <li> 요소가 <ul> 요소 내에 없습니다. 그러나이 스타일을 #nav a에 추가하면 #nav a 선언은 다음과 같습니다. <li> 요소는 <ul>입니다. <li> 요소가 <ul> 내에 왜 #nav a에 display:block를 추가 할 때왜 디스플레이가 필요합니까? block

#nav a { 
    display:block; 
    margin:0; 
    padding:8px 16px; 
    color:#333; 
    text-decoration:none; 
    border:1px solid #9B8748; 
    border-bottom:none; 
    background:#F9E9A9; 
}

는 아무도 설명 할 수 있습니까?

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
    body { 
     font-family:Arial, sans-serif; 
     font-size:small; 
     width:720px; 
     margin:0; 
     padding:0; 
    } 
    #nav { 
     float:left; 
     width:100%; 
     margin:0; 
     padding:10px 0 0 46px; 
     list-style:none; 
     background:#FFCB2D; 
    } 
    #nav li { 
     float:left; 
     margin:0 1px 0 0; 
     padding:0; 
     font-family:"Lucida Grande", "sans-serif"; 
     font-size:90%; 
    } 
    #nav a { 
     /* display:block;*/ 
     margin:0; 
     padding:8px 16px; 
     color:#333; 
     text-decoration:none; 
     border:1px solid #9B8748; 
     border-bottom:none; 
     background:#F9E9A9; 
    } 
    #nav a:hover { 
     color:#333; 
     padding-bottom:5px; 
     border-color:#727377; 
     background:#fff; 
    } 
</style> 

<meta charset="utf-8" /> 
<title>Chapter 3</title> 
</head> 
<body> 
<ul id="nav"> 
    <li id="t-intro"><a href="/">Introduction</a></li> 
    <li id="t-about"><a href="about.html">About Lance</a></li> 
    <li id="t-news"><a href="news.html">News &amp; Events</a></li> 
    <li id="t-sponsors"><a href="sponsors.html">Sponsors</a></li> 
</ul> 
</body> 
</html>

출처

2013-08-06 user2658578

...

이 http://jsfiddle.net/LUzbR/

HTML

<ul id="nav"> 
    <li id="t-intro"><a href="/">Introduction</a></li> 
    <li id="t-about"><a href="about.html">About Lance</a></li> 
    <li id="t-news"><a href="news.html">News &amp; Events</a></li> 
    <li id="t-sponsors"><a href="sponsors.html">Sponsors</a></li> 
</ul>

CSS

body 
    { 
     font-family:Arial, sans-serif; 
     font-size:small; 
     width:720px; 
     margin:0px; 
     padding:0px; 
    } 

    #nav 
    { 
     float:left; 
     width:100%; 
     margin: 0px; 
     padding:10px 0px 0px 46px; 
     display: block; 
     list-style:none; 
     background:#FFCB2D; 
    } 

    #nav li 
    { 
     float:left; 
     display: block; 
     margin:0 1px 0 0; 
     padding:0; 
     font-family:"Lucida Grande", "sans-serif"; 
     font-size:90%; 
    } 

    #nav a 
    { 
     /* display:block;*/ 
     margin:0px; 
     padding:8px 16px; 
     color:#333; 
     text-decoration:none; 
     border:1px solid #9B8748; 
     border-bottom:none; 
     background:#F9E9A9; 
     display: block; 
    } 


    #nav a:hover 
    { 
     color:#333; 
     padding-bottom:5px; 
     border-color:#727377; 
     background:#fff; 
    }

출처

2013-08-06 22:07:28

이 코드를 조금 설명하고, 어쩌면 좁은 고려할 것을 다음을 참조 실제로 여기에있는 특정 질문을 다루는 부분에 이르기까지? –

당신은 그렇게 모든 <li> 요소는 해당 컨테이너의 외부에 나타납니다, 왼쪽에 #nav 요소를 떠 있습니다. 초보자를 위해 #nav에 overflow: hidden;을 추가해보세요.하지만 CSS를 정리하는 데 더 많은 작업이 필요할 수 있습니다.

출처

2013-08-06 21:53:02

display: block을 추가하지 않으면 a 요소는 display: inline으로 처리됩니다. 따라서 부모 크기 (height은 기본적으로 auto)를 계산할 때 a 요소의 padding은 생략되며 display: block의 경우에 포함됩니다. 내가 코드를 업데이트

출처

2013-08-06 21:57:04 EZSlaver

왜 디스플레이가 필요합니까? block

답변

관련 문제