왜 내 목록 항목이 인라인으로 표시되지 않습니까?

Question

방금 ​​여기에 몇 줄의 코드를 작성했습니다. 텍스트를 <h1> 아래에 표시하고 싶지만 CSS <h1> 또는 <span>을 "display : block"으로 편집하면 부모 요소 <li>도 블록으로 표시됩니다.

<ul> 
<li><h1>Big Number</h1><span>Description</span></li> 
<li><h1>Big Number</h1><span>Description</span></li> 
<li><h1>Big Number</h1><span>Description</span></li> 
</ul> 

이

는 스타일 :

가 어떻게이 <li> 디스플레이 인라인과 <span> 텍스트가 <h1> 아래에 표시 할 수

ul li { 
    display: inline; 
} 

h1 { 
    display: inline; 
} 

span { 
    display: inline; 
} 

?

Answer 1

인라인 상자에는 블록 상자가 포함될 수 없습니다.

inline 대신 display: inline-block을 사용하십시오.

Answer 2

사용이 방법 :

ul li {display: inline-block;} 
h1 {display: inline-block;} 
span {display: block;} 

Answer 3

당신은 단지 UL 리튬 선택에 인라인 블록 속성을 사용해야이 SAMPLE

ul li { 
    display: inline-block; 
} 

h1 { 
    display: inline; 
} 

span { 
    display: block; 
} 

Answer 4

을보십시오.

ul li { display: inline-block }

jsfiddle.net 그래서 나는 당신을 위해 예를 할 수없는 지금 작동하지 않습니다. 또한 h1 및 스팬 스타일을 삭제해야합니다.

CodePen

http://codepen.io/Tudes/pen/dyFDL

가 H1 그 수단 블록 요소이므로 선택기 인 상향 리튬에 만 인라인 블록 속성을 사용해야하는 이유에 대한 일례 그것은 div의 전체 너비를 취할 것이고 스팬 바로 아래로 갈 것입니다.