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>

如何让<li>菜单在一行中在IE7中显示良好？

由于

Answer 1

看起来像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 2

如果我理解这个问题，你需要这个;

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

Answer 3

喜欢这样：

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

首先，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 hack使其适用于所有情况：

.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

li标签，IE7和文本在一行（行）

4 个答案: