如何强制 div 使用滚动条出现在 1 行中？答案

【问题标题】：How to force divs to appear in 1 line with a scrollbar?如何强制 div 使用滚动条出现在 1 行中？
【发布时间】：2015-03-01 07:35:03
【问题描述】：

我在这里做一个页面http://arin.esy.es/arin/site/species.php

问题是鱼 div（具有类“节点”）似乎包裹在父 div 中（具有类“行”）。我想要它，以便所有节点 div 都在 1 行中，在行 div 中水平移动。我不想让它包起来。此外，可能还有更多的行 div。

我也想要它，这样所有的行 div 都没有滚动条。应该有一个水平滚动条，但它应该只用于行 div 的父级，它是一个 td 标记。不应存在垂直滚动条。并且水平滚动应该只在需要时可见。

有人知道怎么做吗？

谢谢。

HTML

<!DOCTYPE >
<html>
    <head></head>
    <body>
        <table id="fish_container">
            <tbody>
                <tr>
                    <td id="category_container" valign="top">
                        <div class="row">
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                            <div class="node" style="background-image: url(http://arin.esy.es/arin/scripts/config/../../pics/category/1/1.png);"></div>
                        </div>
                    </td>
                    <td id="species_container" valign="top"></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

CSS

html {
    background-color:blue;
}

#fish_container {
    width:100%;
    height:100%;
}
#category_container {
    width:75%;
    height:100%;
    overflow-x: scroll;
}
#species_container {
    width:25%;
    height:100%;
    overflow-x: scroll;
    overflow-y: scroll;
}
.row {
    width:100%;
    height:100px;
    text-align: center;
    white-space: nowrap;
}
.node {
    width:100px;
    height:100px;
    display: inline-block;  
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border: 2px solid transparent;
}
.node:hover {
    border: 2px solid green;
}

【问题讨论】：

这应该只是 CSS，你不应该需要任何 Javascript。
可以使元素宽度为 50000 像素，这样孩子就不会换行（或任何合理的）。将其父级的溢出设置为自动或滚动
我通过将 css 'nowrap' 放在行上来修复包装（我更新了上面的 css）。但是现在的问题是水平滚动没有显示在 td 标签上。
好的，水平滚动显示，但问题是原始布局不起作用。 category_container 需要 75% 的宽度，species_container 需要 25% 的宽度。但是species_container 甚至不再显示了。

标签： jquery html css

【解决方案1】：

overflow: scroll 属性不适用于表 <td>。看到这个答案：

overflow:scroll; in <td>

overflow: hidden 似乎适用于表格，但前提是您将<td> 的样式设置为table-layout:fixed。但是overflow: auto 或overflow: scroll 在任何情况下都不起作用。

大多数人解决此问题的一种方法是将<td> ... </td> 之间的内容包装在div 中，然后为该div 设置overflow 属性。

在您的情况下，这意味着将overflow 样式属性赋予具有.row 类的div，因为.row 已经包围了表格行的所有内容：

.row {
    width:100%;
    height:100px;
    text-align: center;
    white-space: nowrap;
    overflow-x: auto;
}

我知道这不是你想要的，不幸的是你想要的在 CSS 中是不可能的。用div 包围你的表格行内容可能是你最好的选择。

【讨论】：