如何使用滚动条强制div显示在一行中？
如何使用滚动条强制div显示在一行中？
提问于 2015-01-03 10:27:18
我在这里做一个页面http://arin.esy.es/arin/site/species.php
问题是fish div (具有类"node")似乎包装在父div(具有类"row")中。我想让所有的节点div都在一行中，在行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;
}回答 1
Stack Overflow用户
发布于 2015-01-03 11:25:11
overflow: scroll属性不适用于表<td>。请看这个答案：
但是，只有在将<td>的样式设置为table-layout:fixed时，overflow: hidden才能很好地处理表格。但是，overflow: auto或overflow: scroll在任何情况下都不能工作。
大多数人解决此问题的一种方法是将内容包装在div中的<td> ... </td>之间，然后为该div设置overflow属性。
在本例中，这意味着将overflow样式属性赋予带有.row的div类，因为.row已经包含了表行的所有内容：
.row {
width:100%;
height:100px;
text-align: center;
white-space: nowrap;
overflow-x: auto;
}我知道这不是你想要的，不幸的是你想要的在CSS中是不可能的。将表行内容包含在div中可能是您的最佳选择。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27751156
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号