浮动可变宽度的列表项，而不必内容包

我有有这个行为完全因为我想在所有浏览器有点麻烦，但我发誓我以前做过这样的：浮动可变宽度的列表项，而不必内容包

<!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浏览器黑客的魔力组合，以使其工作。有没有人解决过这个问题？

来源

2010-07-14 dmrnj

添加white-space: nowrap;到a标签

来源

2010-07-14 13:55:37 ScottS

感谢您的答复。我试过了，但即使Books-A-Million链接现在被强制转到下一行，IndieBulding链接失去了它的填充并现在出现在背景图标上。 – dmrnj 2010-07-14 13:58:37

将'display：inline-block;'或其他'hasLayout'触发器添加到'a'标签（假设不会搞乱其他任何内容）。如果这会导致其他浏览器出现问题（我认为它不会），请通过您最喜欢的IE浏览器方式为您的IE提供'zoom：1'。 – ScottS 2010-07-14 14:13:21

浮动可变宽度的列表项，而不必内容包

回答

相关问题