li 태그, IE7 및 한 줄에있는 텍스트 (행)

Question

나는 <li> 태그에 텍스트가 있으며 한 줄에이 텍스트를 표시하고 싶습니다.

Firefox는 좋지만 IE7, 아니요. IE7에서는 <li> 요소에 width을 부여해야합니다. 그러나 텍스트는 매우 길거나 짧을 수 있습니다. 그래서 이것은 나에게 더 좋은 : width 50px;

#menu_all li{ 
    float:left; 
    display: block-inline; 
    padding:0; 
    margin-left: 5px; 
} 
<div id="menu_all"> 
    <ul> 
     <li><span class="text">Text</span></li> 
     <li><span class="text">Text2</span></li> 
     <li><span class="text">Text2 text text</span></li> 
    </ul> 
</div> 

어떻게 한 줄에 잘 IE7에서 그 <li> 메뉴 쇼를?

덕분에이 같이

Answer 1

:

#menu_all ul li{ 
     float: left; 
     display: inline; 
     padding: 0; 
     margin: 0 0 0 5px; 
    } 
    <div id="menu_all"> 
     <ul> 
      <li><span class="text">Text</span></li> 
      <li><span class="text">Text2</span></li> 
      <li><span class="text">Text2 text text</span></li> 
     </ul> 
    </div> 

Answer 2

은 CSS의 오류처럼 보인다. display: inline-block;이 아닌 display: block-inline;입니다.

개정 코드 :

#menu_all li 
{ 
    float: left; 
    display: inline-block; 
    padding: 0; 
    margin-left: 5px; 
} 

<div id="menu_all"> 
    <ul> 
     <li><span class="text">Text</span></li> 
     <li><span class="text">Text2</span></li> 
     <li><span class="text">Text2 text text</span></li> 
    </ul> 
</div> 

Answer 3

첫째, display: block-inline; 잘못입니다 - display: inline-block;을해야합니다.

둘째로 동일한 스타일로 display과 float을 사용하는 것은 불필요합니다. float은 디스플레이 모드를 block으로 자동 전환합니다.

마지막으로, inline-block 모드는 IE (IE6와 IE7)의 이전 버전에서이 문제를 가지고 그것이 유일한 의미 (float 다른 짜증나는 단점을 가지고 있습니다하지만 난 항상 float 가능한 대신 inline-block를 사용하는 것을 선호) 네이티브 디스플레이 스타일이 inline 인 요소에 적용됩니다.

IE6 또는 IE7을 지원해야하는 경우 inline-block을 사용하는 데 큰 문제가 있음을 의미합니다. 일부 태그에서는 작동하지만 다른 태그에서는 작동하지 않습니다.

다행히도 빠른 해결 방법이 있습니다. IE7은 을 기본적으로 inline-block과 동일하게 처리하므로 IE7의 경우는 display:inline;으로 지정할 수 있습니다.

.mystyle { 
    display:inline-block; 
    /*next two lines IE7-hack*/ 
    zoom:1; 
    *display:inline; 
} 

합니다 (zoom:1; 올바른에 표시하기 위해 IE를 해킹 라운드에 대한 방법이다 또한 IE 특정 스타일 :하지만 그것은 모든 경우에 작동하게하는 불쾌한 CSS 해킹을 사용하여 의미 하는가 모드)

스타 해킹의 대안은 IE7의 이러한 스타일을 지정하기 위해 IE의 조건부 주석 기능을 사용하는 것입니다.하지만 이는 또한 매우 불쾌 할 수 있습니다. 그런데

의 display 스타일 브라우저 지원에 대한 자세한 내용은, Quirksmode.org에이 페이지를 참조하십시오 : http://www.quirksmode.org/css/display.html

Answer 4

내가이 질문을 이해한다면, 당신이 필요합니다;

#menu_all ul li{ display: list-item;}