Forcing Block Elements to Not Wrap in IE (no fixed

2019-09-02 19:54发布

站内问答 / HTML/CSS
387 2 6

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.

标签： css html nowrap
举报
2条回答
贼婆χ
2楼-- · 2019-09-02 20:26

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;

查看更多
0人赞 添加讨论(0) 举报
冷血范
3楼-- · 2019-09-02 20:41

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)