Floating variable-width list items without having contents wrap_问答_开发者

Floating variable-width list items without having contents wrap

开发者 https://www.devze.com 2023-01-07 11:49 出处：网络

I\'m having a little trouble having this behave exactly as I want across all browsers, but I swear I\'ve done this before:

相关专题：css css-float

I'm having a little trouble having this behave exactly as I want across all browsers, but I swear I've done this before:

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

This looks fine and dandy in most modern browsers, but in IE 6 and 7, the "Books-A-Million" link wraps.

I'd like to have the list items variable width and wrapping to new lines, but the links inside not wrapping. I can't figure out the magic combination of display types and CSS browser hacks to make it work. Has anyone tackled this issue before?

Add white-space: nowrap; to the a tags