Forcing Block Elements to Not Wrap in IE (no fixed width parent)

问题

This is quite a highly discussed issue on the web, but after hours of research and trial and error, I am still unable to get the below HTML to behave as desired in IE 7, 8 or 9:

<html>
    <head>
        <title>Untitled Page</title>
        <style>
            .container {
                white-space: nowrap;
                overflow: auto;
                position: absolute;
            }
            .childContainer {
                float: left;
            }
            .box {
                float: left;
                border: 1px solid black;
                width: 20px;
                height: 20px;

            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="childContainer">
                <div class="box"></div><div class="box"></div><div class="box"></div>
                <!-- repeat until off screen -->
                <div class="box"></div><div class="box"></div><div class="box"></div>
            </div>
            <div class="childContainer">
                <span>This should not wrap!</span>
            </div>

        </div>
    </body>
</html>

The desired behaviour is as follows:

.box elements must not wrap - a scroll bar should appear it the bottom of the window
.box elements must have a fixed width and height
.container and .childContainer cannot have a fixed width. The number of .box elements is arbitrary
must behave reasonably consistently in IE7+ and recent versions of Chrome and FireFox

The provided HTML works in Chrome, I believe it honours the white-space: nowrap even for block elements. I've tried using SPAN elements, but they need to be forced to be a block element with float: left or the width attribute is ignored. They then have the same issue as DIV elements.

I'm sure there must be a solution to this without using JavaScript, but that is an option if all else fails.

回答1:

http://jsfiddle.net/hjCWN/

I haven't tried it in IE, but you could try removing white-space: nowrap; and replace it to margin-right: -99999px;

回答2:

Put the boxes in a table. That seems to be the only practical approach.

When you try to make the .box elements appear in a row, the use of float: left has its own effect, which cannot be prevented by setting white-space, as it operates at a different level, so to say. But by putting them into a table row, you force them into a row.

You can even dispense with those elements and just style cells of a table:

<style>
table.boxes td {
  border: 1px solid black;
  width: 20px;
  height: 20px;
  padding: 0;
}
</style>
...
<table class=boxes cellspacing=0><tr><td>...</td><td>...</td>...<td>...</td></tr></table>

来源：https://stackoverflow.com/questions/9125086/forcing-block-elements-to-not-wrap-in-ie-no-fixed-width-parent

标签

css

html

nowrap