Question

如果需要，我希望有一个水平滚动条，通过逐个添加'child'divs而不是在父级不够宽时将其推送到下一行。

我的代码如下。如果你将.mid设置为宽度：1000px，你就会看到我想要的东西，只是我只希望它和动态生成的孩子一样宽。

<html>
<head>

    <style type="text/css">

        .parent {
            width: 400px;
            background-color: #666;
            overflow:scroll;  /* cater to the older browsers */
            overflow-y:hidden; /* Hide vertical*/
        }

        .mid {
            background-color: red;
        }

        .child {
            display:inline-block;
            background-color: #ccc;
            border: 1px solid black;
            width: 190px;
        }

    </style>

</head>
<body>
    <div class="parent">
        <div class="mid">
            <div class="child">
                I am a child.
            </div>
            <div class="child">
                I am a child.
            </div>
            <div class="child">
                I am a child.
            </div>  
        </div>
    </div>

</body>
</html>

Answer 1

哎呀，不妨回答这个问题。你将需要Javascript，但鉴于你已经使用它来动态生成子元素，它应该不是一个问题。

假设您正在使用jQuery，请在生成元素后添加以下两行：

var child = $('child');
$('.mid').width(child.length * child.outerWidth(true));

对于错误传达感到抱歉

然而，使用它会产生另一个问题。使用display: inline-block时，每个div后面都会添加一个空格，因此jQuery无法获得正确的宽度。但是，如果您使用float: left，则不会发生这种情况。

Answer 2

人们以前来过这里，找到了最好/最简单的方法。看这里：

http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

Answer 3

您可以尝试使用overflow:auto

如何根据内容的大小强制水平滚动

3 个答案: