Html 浮动可变宽度列表项，无内容换行_Html_Css_Css Float

Html 浮动可变宽度列表项，无内容换行

html css

Html 浮动可变宽度列表项，无内容换行,html,css,css-float,Html,Css,Css Float,在所有浏览器中，我都很难让它完全按照我所希望的那样运行，但我发誓我以前也这么做过： <!html> <head> <style type="text/css"> div { width:300px; } ul { list-style:none; margin:0; padding:0; } li { margin:0.25em 0.5em 0.25em 0; background:transparent url(http://

在所有浏览器中，我都很难让它完全按照我所希望的那样运行，但我发誓我以前也这么做过：

<!html>
<head>
    <style type="text/css">
    div { width:300px; }
    ul { list-style:none; margin:0; padding:0; }
    li { margin:0.25em 0.5em 0.25em 0; background:transparent url(http://cdn.iconfinder.net/data/icons/basicset/pencil_16.png) no-repeat scroll 0 0; float:left; }
    a { padding-left:24px; }
    </style>
</head>
<body>
<div>
    <ul>
        <li><a href="/">Amazon</a></li>
        <li><a href="/">Barnes &amp; Noble</a></li>
        <li><a href="/">Books-A-Million</a></li>
        <li><a href="/">Borders</a></li>
        <li><a href="/">Indie Bound</a></li>
        <li><a href="/">Powell's</a></li>
    </ul>
</div>
</body>


div{宽度：300px；}
ul{列表样式：无；边距：0；填充：0；}
li{margin:0.25em0.5em0.25em0；背景：透明url(http://cdn.iconfinder.net/data/icons/basicset/pencil_16.png)无重复滚动0；浮动：左；}
a{padding left:24px；}

这在大多数现代浏览器中看起来都很不错，但在IE6和IE7中，“Books-A-Million”链接被包装起来

我想让列表项变宽并换行到新行，但里面的链接不换行。我想不出显示类型和CSS浏览器技术的神奇结合是如何让它工作的。以前有人解决过这个问题吗？

添加

空白：nowrap到a
标签
谢谢回复。我尝试过这个，但是即使Books-A-1000000链接现在被强制到下一行，独立绑定链接也会丢失其填充，并出现在背景图标上

或其他一些

hasLayout

触发

标记（假设这不会弄乱任何其他内容）。如果这会导致其他浏览器出现问题（我不认为会），请通过您最喜欢的IE定位方式为IE提供一个

zoom:1

。