在固定div中实现水平滚动

时间:2015-01-13 07:37:17

标签: html css

当我的外部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;
}

1 个答案:

答案 0 :(得分: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/