IE中的li nowrap子元素无法正常工作

时间:2012-02-09 11:31:55

标签: jquery css internet-explorer

使用JQuery我将元素列表添加到div层。

我的元素列表构造为,

<li>
    <span>AAA BBB CCCCCCC</span>
    <a href="#">Delete</a>
</li>

请查看图像并观察最后一个被制动的元素。 enter image description here

仅在IE6和IE7中就会发生这种情况。

尝试将所有元素与display:inline display:inline-block float:left;

结合起来

如何停止包装子元素。

请建议。

提前致谢。

5 个答案:

答案 0 :(得分:3)

您必须为IE7定义zoom display:inline。写得像这样:

ul{white-space: nowrap;
}

li span, li a{
 display:inline-block;
 *display:inline;/* For IE7*/
 *zoom:1;/* For IE7*/
}

检查它在IE7中的工作http://jsfiddle.net/3jCF9/5/

float移除li,因为white-space:nowrap无效float元素。

答案 1 :(得分:1)

尝试display:block; 应该做的工作。 float:left;与它无关!

答案 2 :(得分:1)

以下似乎有效:

ul {
    white-space: nowrap;
}
li {
    display: inline-block;
    white-space: nowrap;
}

JS Fiddle demo

答案 3 :(得分:0)

我不确定该输出的上下文,但你可以尝试使用white-space:nowrap;在父亲ul

答案 4 :(得分:0)

您的建议帮助我实际解决了这个问题。我为锚标记添加了position: absolute,为li添加了margin-right: 5px并修复了我的问题。

感谢您的建议。