블럭 속성을 비 블록 요소

Question

으로 설정하면 아래의 설정으로 css가 나를 위해 수평 메뉴 막대를 생성하는 속임수를 사용합니다. 어쨌든, 그 속성이 블록 (앵커 태그)으로 설정되어 있더라도 세 번째 그룹 스타일 시트에 따르면, 나는 알고 싶다. 왜 블록처럼 행동하지 않는 거지?

대부분의 CSS 튜토리얼에서 블록은 요소 앞뒤에 줄 바꿈이 있어야한다는 것을 알게 되었기 때문에. 그러나이 경우에 그들은 (모든 앵커들)이 왜 같은 줄에 다른 앵커들과 나란히 배치되었는지를 설명합니다. 나는 단지 궁금해서 이해하고 싶습니다.

모든 설명은 대단히 감사하겠습니다!

ul { 
    list-style-type: none; 
    height: 28px; 
    width: 100%; 
    margin: auto; 
} 

li { 
    float: left; 
} 

ul a { 

    background-repeat: no-repeat; 
    background-position: right; 
    padding-right: 10px; 
    padding-left: 10px; 
    display: block; 
    line-height: 28px; 
    text-decoration: none; 
    color: #FFFFFF; 
} 

HTML

<div id="menuBar"> 
    <ul> 
    <li><a href="/">Home</a></li> 
    <li><a href="/about">About</a></li>      
    </ul> 
</div> 

Answer 1

당신은 왼쪽 float로 설정하는 <li> 있습니다. 앵커 태그가 li 태그 안에 있다고 상상해보십시오.

li { 
    float: left; 
} 

그리고 당신의 <a> 블록 수준이어야한다 :이 규칙을 제거합니다. <li>을 왼쪽으로 떠서 설정하면 브라우저가 블록 요소를 서로 아래에 대신 서로 쌓아 두도록 설정합니다.

Answer 2

좋아요, 그들은 각각 <li> 요소가 왼쪽으로 떠올랐다는 이유로 실제로 줄에 표시되는 이유입니다. <a> 태그는 블록 형식이지만 각 요소 내에서만 <li> 요소 내에 있습니다. 따라서 동일한 <li> 태그 안에 <a> 태그를 두 개 이상 겹쳐 쓰면 다른 태그 위에 하나가 쌓입니다. 그러나 블록 요소는 사용 가능한 너비의 너비가 100 %입니다. 따라서이 경우는 <li> 태그의 너비이므로 다른 요소가 그 아래로 밀리지 않습니다.

더 좋은 예 편집 :

당신은 목록 항목이 CSS에서 일반 목록 항목으로 표시하지 않으려는 <ul> 태그를 말하고있다. 그런 다음, 왼쪽에 뜨는 요소 인 <li>을 알려줍니다. 그리고 여러분은 그것들을 지우지 않으므로, 스택에있는 다른 것들에 대해 하나의 셀을 띄울 때까지 하나의 셀을 다른 셀과 마주 보게 될 것입니다.

그래서 페이지의 본문에 있다고 가정 해 보겠습니다. 본문의 너비는 800px이고 각 <li>은 200px를 차지합니다. 줄을 아래로 떨어 뜨리기 전에 행에 4 <li> 개의 요소가 있어야합니다.

이제 가정과 정보 링크는 사용 가능한 공간의 100 %를 차지하는 블록 요소 인 200px (각각 <li> 안에 포함되어 있기 때문에 200px를 차지합니다. 태그). 이들은 (기본적으로) 포함 된 요소의 맨 위에 수직으로 정렬되어 인라인으로 표시되는 것처럼 나타납니다.

하지만 그렇지 않습니다. 너비가 사용 가능한 200px로 제한된다는 것입니다. 두 링크를 동일한 <li> 요소 내에 배치하면 각 링크가 <li> 요소의 사용 가능한 너비의 100 %를 차지하므로 서로 쌓아 놓은 것을 볼 수 있습니다.<a> 태그가 <li> 요소에 포함되지 않은,하지만 직접 몸, 즉 가능한 폭의 100 %로 그 폭이 800 픽셀 각 것, 그들이 다른 위에 하나를 쌓아한다면

.