隐藏的内部DIV
隐藏的内部DIV
提问于 2013-06-01 23:03:57
假设我有两个DIV元素:一个外部容器DIV，以及容器内部的内部DIV。我希望内部DIV比外部DIV大得多，但是外部DIV有一个overflow:hidden属性，所以大多数内部DIV是不可见的。
其目的是实现滚动或滑动功能，您可以在外部DIV中移动内部DIV。
一个基本的实现可能类似于：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 500px;
height: 40px;
border: 1px solid #a8a8a8;
padding: 5px;
overflow: hidden;
}
.inner-content {
white-space: no-wrap;
position: relative;
display: inline-block;
}
.inner-element {
display: inline-block;
}
</style>
</head>
<body>
<div class = "container">
<div class = "inner-content">
<div class = "inner-element">Lots of content goes here</div>
<div class = "inner-element">Lots of content goes here</div>
<div class = "inner-element">Lots of content goes here</div>
<div class = "inner-element">Lots of content goes here</div>
<div class = "inner-element">Lots of content goes here</div>
<div class = "inner-element">Lots of content goes here</div>
</div>
</div>
</body>
</html>问题是我希望内部DIV中的所有元素并排出现在同一水平线上，这样用户就可以向左或向右滚动。
因此，这可以通过在所有元素(或float)上简单地使用display: inline-block来实现。除了问题是为了防止内部元素换行，我需要在.inner-content上指定一个非常大的宽度。(例如，如果我指定width:10000px或其他东西，那么内部元素当然不会换行。)但问题是，用户将能够无休止地向右滚动内部DIV。
那么，如何才能使内部DIV中的所有(部分隐藏的)元素保持在同一水平线上(而不显式指定宽度)呢？
Stack Overflow用户
回答已采纳
发布于 2013-06-01 23:24:27
你与你的示例代码非常接近！通过将内部元素设置为inline-block并指定nowrap，您可以确保每个元素不会包装在容器中。但是，您还希望元素链不在每个内部元素的末尾包装。因此，只需将nowrap添加到容器中，所有项都将在同一行上。
http://jsfiddle.net/ere4x/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16874039
复制相关文章
相似问题
腾讯云开发者
