Question

我正在进行一个项目，我们想要一些彼此相邻的面板，如果所有面板都不能一次显示在屏幕上，则显示一个水平滚动条（典型情况）。我花了一天时间试图用一些简单的HTML和CSS来解释这可能是如何工作的，但我无法100％得到它。我在IE 9和Chrome 29.x中都试过这个。两者都呈现相同。

基本上，我无法将不可见的面板不包裹到下一个“线”。但是，（在下面的标记的情况下），面板5不可见，因为它已经包裹。下面的HTML就我可以得到的一些重要差异而言：

最终，我不想要为#scrollBox指定宽度（当前设置为1200px）。我们希望保持这种开放性，以便该区域始终跟踪并随用户的浏览器窗口一起增长。
我不是在使用或标签上出售，它们只是我所知道的并且在我的整体设计中工作。
是的，目前fieldset.firstPanel和fieldset.otherPanel是相同的，将来可能会发生变化。与div.firstPanel和div.otherPanel相同。

任何帮助将不胜感激。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Horizontal Scrolling Panels</title>
    <style type="text/css">
        fieldset.firstPanel {
            height: 200px;
            width: 300px;
            margin-right: 10px;
        }
        fieldset.otherPanel {
            height: 200px;
            width: 300px;
            margin-right: 10px;
        }
        div.firstPanel {
            height: 200px;
            width: 300px;
            float: left;
            display:inline-block;
        }
        div.otherPanel {
            height: 200px;
            width: 300px;
            float: left;
            display:inline-block;
        }
        #scrollBox {
            width: 1200px;
            height: 220px;
            overflow-x: auto;
            overflow-y: hidden;
            -ms-overflow-x: auto;
            -ms-overflow-y: hidden;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
        <div>
            <div id="scrollBox">
                <div class="firstPanel">
                    <fieldset class="firstPanel">
                        <legend>Panel 1</legend>
                    </fieldset>
                </div>
                <div class="otherPanel">
                    <fieldset class="otherPanel">
                        <legend>Panel 2</legend>
                    </fieldset>
                </div>
                <div class="otherPanel">
                    <fieldset class="otherPanel">
                        <legend>Panel 3</legend>
                    </fieldset>
                </div>
                <div class="otherPanel">
                    <fieldset class="otherPanel">
                        <legend>Panel 4</legend>
                    </fieldset>
                </div>
                <div class="otherPanel">
                    <fieldset class="otherPanel">
                        <legend>Panel 5</legend>
                    </fieldset>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Answer 1

对于容器上的元素（不浮动）和display:inline-block，基本样式为white-space: nowrap;：

<强> Demo fiddle

    #scrollBox {
        overflow-x: auto;
        overflow-y: hidden;
        -ms-overflow-x: auto;
        -ms-overflow-y: hidden;
        white-space: nowrap;
    }
    #scrollBox > div {
        display: inline-block;
        margin-right: 10px;
    }
    #scrollBox > div fieldset {
        height: 200px;
        width: 300px;
    }

无法使CSS水平滚动工作

1 个答案: