html - 实现固定div的水平滚动

Question

当我的外部 div 具有固定的高度和宽度时，我想显示内部 div 内联和水平滚动。

HTML:

<!-- fixed height and width -->
<div class="outer"> 
   <!-- inner dives which will display horizontally scrolled -->
   <div class="inner"></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div> 

CSS:

.inner {
    max-width:100; 
    height:60px; 
    border: 1px thin #333;
}

.outer {
   width: 300px;
   overflow-x: scroll;
   overflow-y: hidden;
   height: 320px;
}

Answer 1

您的 .inner 的最大宽度为 100，没有单位。我假设 px？如果是这样，那么您希望事情水平滚动而根本没有换行吗？如果是这样，这应该做你想做的:

.inner
{
    display: inline-block; /* makes your divs side-by-side */
    max-width:100px;
    height:60px;
    border: 1px solid #333;
}

.outer {
    white-space: nowrap; /* makes all your inner divs stay on the same line */
    width: 300px;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 320px;
}

演示:http://jsfiddle.net/zzqhcvof/