2011-04-19 1 views
1

나는이 같은 목록이있는 경우 :디스플레이 인라인 CSS는 모든 하위 수준 목록

<ul> 
    <li> 
    item name 
    <ul> 
     <li> 
     item name 
     </li> 
     <li> 
     item name 
     <ul> 
      <li> 
      item name 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

그리고 예를 들어 내가 각각 "리는"인라인 모두 하나 개의 문장 ... 내가 필요한 그와 같은 표시 할 빵 부스러기이 ...

나는이 시도 :

ul li { 
    display: inline; 
    float: left; 
} 

을하지만 늘 일 때문에 "UL"또는 그 아래에 간다, 그래서 "리"정의 폭이 없습니다.

어떤 도움을 환영합니다, 고마워요!

답변

0

<li> 요소 안에 텍스트를 넣으면 텍스트가 블럭 레벨 요소 자체처럼 작동합니다 (효과적으로 각 텍스트 세트를 <p> 태그로 묶음). 당신은 또한 you will get the desired result

를 예를 들어 <span>의 텍스트를, 포장,뿐만 아니라 스팬 inline를 한 경우, 대신의 선택으로 ul, li, span를 사용 ul li


편집 :

사실 원래 CSS를 다음과 같이 변경하면

ul, li {display: inline} 

pe 완벽하게.

+0

내가 디스플레이 인라인 '아무튼 생각 IE와 함께 작동합니까? – Karington

+1

@ 캐링턴 그것이 작동합니다. 'display : inline-block'은 IE8에서 작동하지 않습니다 (자연스럽게'inline' 요소에서만). – kapa

0

중첩 된 UL 만 스타일을 지정하려면 선택자로 ul ul li을 사용하십시오. 아마도 float: left이 필요하지 않을 수도 있습니다.

0

당신은 단지 외부을 원하는 대신 그들을 떠하려는 경우,

/* both the inner ul's and the li's */ 
ul ul, 
li 
{ 
    display:inline; 
} 

또는 : 3,그래서 다른 모든 요소 인라인 요소를 만들기 위해, 블록 레벨 요소로, 당신은 사용할 수 있습니다

ul 
{ 
    overflow: hidden; /* make sure the uls wraps around their contents, mainly for outer ´ul´ */ 
} 
ul ul, 
li 
{ 
    float: left; 
}