Question

我在所有浏览器中完全按照我的要求行事时遇到了一些麻烦，但我发誓我之前已经这样做了：

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

在大多数现代浏览器中，这看起来很精致，但在IE 6和7中，“Books-A-Million”链接包装。

我想让列表项可变宽度并换行到新行，但是里面的链接没有换行。我无法弄清楚显示类型和CSS浏览器黑客的神奇组合，以使其工作。有没有人以前解决过这个问题？

Answer 1

将white-space: nowrap;添加到a代码

浮动可变宽度列表项而不包含内容

1 个答案: