2

假设我有两个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 中的所有元素并排出现在同一水平线上，因此用户可以向左或向右滚动。

所以这可以通过简单地使用display: inline-block所有元素（或float）来实现。除了问题是为了防止内部元素换行，我需要在.inner-content. （例如，如果我指定width:10000px什么，那么内部元素当然不会换行。）但问题是用户将能够无休止地向右滚动内部 DIV。

那么，我该如何安排事情，以使内部 DIV 中的所有（部分隐藏）元素都保持在同一水平线上（无需明确指定宽度）？

4

1 回答 1

1

你真的很接近你的示例代码！通过将内部元素设置为inline-block并指定nowrap，您可以确保每个元素都不会包裹在容器内。但是您还希望元素链不在每个内部元素的末尾换行。因此，只需添加nowrap到容器中，所有项目都将位于同一行。

http://jsfiddle.net/ere4x/

于 2013-06-01T15:24:27.083 回答