Question

假设我有两个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中的所有（部分隐藏的）元素保持在同一水平线上（没有明确指定宽度）？

Answer 1

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

http://jsfiddle.net/ere4x/

隐藏的内在DIV

1 个答案: