强制块元素在 IE 中不换行（无固定宽度父级）

发布于 2025-01-02 06:30:40 字数 1636 浏览 0 评论 0原文

这是网络上一个备受讨论的问题，但经过数小时的研究和反复试验，我仍然无法让以下 HTML 在 IE 7、8 或 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>

所需的行为如下：

。 box 元素不得换行 - 滚动条应出现在窗口底部
。box 元素必须具有固定的宽度和高度
。container 和 .childContainer 不能具有固定宽度。 .box 元素的数量是任意的，
必须在 IE7+ 以及最新版本的 Chrome 和 FireFox 中表现得相当一致。

提供的 HTML 在 Chrome 中工作，我相信它尊重空白：甚至对于块元素来说也是如此。我尝试过使用 SPAN 元素，但需要强制它们成为带有 float: left 的块元素，否则宽度属性将被忽略。然后它们就会遇到与 DIV 元素相同的问题。

我确信一定有一个不使用 JavaScript 的解决方案，但如果其他方法都失败的话，这是一个选择。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雨后咖啡店 2025-01-09 06:30:40

http://jsfiddle.net/hjCWN/

我没有在 IE 中尝试过，但你可以尝试删除white-space: nowrap; 并将其替换为 margin-right: -99999px;

回复收藏 0 原文

伪装你 2025-01-09 06:30:40

将盒子放在桌子上。这似乎是唯一实用的方法。

当您尝试使 .box 元素出现在一行中时，使用 float: left 有其自身的效果，无法通过设置 white- 来阻止空间，因为它在不同的层面上运作，可以这么说。但是，通过将它们放入表行中，您可以将它们强制排成一行。

您甚至可以放弃这些元素，只设置表格单元格的样式：

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

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 原文

~没有更多了~