중첩 목록의 수준 간 가로 간격을 제어하는 ​​것은 무엇입니까?

Question

다음은 동일한 코드를 세 번 찍은 것입니다. 보시다시피, 그들은 정말로 다양합니다. 나는이 때문에 사물의 다양한 될 수도있을 것 같군요

<ul> 
<li>num 1</li> 
    <ul> 
    <li>num 1.1</li> 
    <li>num 1.2</li> 
    <ul> 
    <li>3rd level</li> 
    </ul> 
    </ul> 
<li>num 2</li> 
</ul> 

하지만 물어 다치게하지 않습니다

그리고 코드는 참조 용입니다. :

Answer 1

수직 공간은 일반적으로 line-height 인 CSS를 통해 제어됩니다. 예를 들어,

li { line-height: 40px; } 

당신은 스타일 목록에 사용되는 일반 CSS 속성 중 일부를 나열하는 this article 유용하게 사용할 수

편집 : 편집 된 질문에 대한 응답으로

, 당신이 제어 할 수 있습니다 수평 간격은 margin-left입니다. CSS 깊이 1의

li ul li { margin-left:100px; } 

의지 공간 목록 또는 오른쪽으로 100 픽셀 이상으로 예를

<ul> 
<li>num 1 
    <ul> 
    <li>num 1.1</li> 
    <li>num 1.2 
    <ul> 
    <li>3rd level</li> 
    </ul> 
    </li> 
    </ul> 
</li> 
<li>num 2</li> 
</ul> 

합니다. Here's how that looks

Answer 2

일반적으로 CSS의 여백 패딩 및 행 높이를 li, ul, ol으로 설정하지 않습니다. 내가 어떤 대부분의 브라우저는이를 설정할 수 있지만, 당신의 HTML이 잘못 날 것으로 보인다 내가 0

ul, ol, li { 
    padding: 0; 
    margin: 0; 
    line-height: 0; 
} 

Answer 3

에 그들 모두를 설정해야 할 여백을 사용하는 거의거야, 당신은 UL 내부 UL를 가질 수 없습니다. 올바른 구문은 다음과 같습니다.

<ul> 
<li>num 1 
    <ul> 
    <li>num 1.1</li> 
    <li>num 1.2 
    <ul> 
    <li>3rd level</li> 
    </ul> 
    </li> 
    </ul> 
</li> 
<li>num 2</li> 
</ul> 

닫는 모든 항목이 해당 목록 항목 (하위 항목 포함) 끝으로 이동했음을 유의하십시오.

CSS 재설정을 사용하면 모든 브라우저에서 같은 방식으로 표시되어야합니다 (더 많거나 적은 ...).

Answer 4

간격을 어떻게 추가 할 것인가에 달려 있습니다. 위쪽/아래쪽 여백 또는 패딩을 사용할 수 있습니다. 귀하의 경우 나는 마진을 선택합니다 :

li { 
    margin: 5px 10px 5px 1em; 
} 

또한 리셋 클래스를 사용하여 브라우저 간의 차이를 표준화하십시오.