李標籤，IE7和文本在一行（行）

我有<li>標籤中的文本，我想在一行中顯示此文本。李標籤，IE7和文本在一行（行）

與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>

如何做出<li>菜單顯示以及在IE7在同一行？

感謝

來源

2010-12-01 user319854

try：display：inline; – 2010-12-01 11:01:14

像這樣：

#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>

來源

2010-12-01 11:02:52

看起來像你的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>

來源

2010-12-01 11:03:06 Damien

首先，display: block-inline;是錯誤的 - 它應該是display: inline-block;。其次，使用相同風格的display和float是不必要的。 float自動將顯示模式變爲block。（但是，我總是喜歡使用inline-block，而不是float儘可能爲float有許多其他惱人的怪癖）

最後，inline-block模式在舊版本的IE（IE6和IE7）的錯誤，這僅僅意味着適用於原生顯示風格爲inline的元素。

這意味着如果您需要支持IE6或IE7，則使用inline-block時會遇到主要問題。它適用於一些標籤但不適用於其他標籤。

幸運的是，有一個快速的解決方法。 IE7對待inline基本上與inline-block相同，因此對於IE7，您只需指定display:inline;即可離開。但它確實意味着使用yukky CSS破解，使之成爲所有情況：

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

（該zoom:1;也是IE特有的風格，是黑客IE中正確顯示它的一個迂迴的方式模式）

明星黑客的替代方法是使用IE的條件註釋功能爲IE7指定這些樣式，但這也可能相當惡劣。

順便說，有關爲display風格的瀏覽器支持的詳細信息，請參閱此頁面上Quirksmode.org：http://www.quirksmode.org/css/display.html

來源

2010-12-01 12:00:18 Spudley

如果我沒有理解這個問題，你需要這個;

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

來源

2010-12-01 12:25:17 spielersun

李標籤，IE7和文本在一行（行）

回答

相關問題