怎么让多个div不换行并出现横向滚动条 _HTML/CSS

如何让多个div不换行并出现横向滚动条
类似下面这样的结构，要求第二层的div不换行，最外层出现横向滚动条

HTML code


<div style="width:200px; height:100px;">
    <div style="width:50px; height:100px;">
        <div>fdsaf</div>
        <div>dfffd</div>
    </div>
    <div style="width:50px; height:100px;">
        <div>fdsaf</div>
        <div>dfffd</div>
    </div>
    <div style="width:50px; height:100px;">
        <div>fdsaf</div>
        <div>dfffd</div>
    </div>
    <div style="width:50px; height:100px;">
        <div>fdsaf</div>
        <div>dfffd</div>
    </div>
    <div style="width:50px; height:100px;">
        <div>fdsaf</div>
        <div>dfffd</div>
    </div>
</div>

------解决方案--------------------

HTML code

<div style="width:200px; height:100px; overflow-x:scroll; white-space:nowrap">
    <div style="width:50px; height:100px; display:inline">
        <div>fdsaf</div>
        <div>dfffd</div>
    </div>
    <div style="width:50px; height:100px; display:inline">
        <div>fdsaf</div>
        <div>dfffd</div>
    </div>
    <div style="width:50px; height:100px; display:inline">
        <div>fdsaf</div>
        <div>dfffd</div>
    </div>
    <div style="width:50px; height:100px; display:inline">
        <div>fdsaf</div>
        <div>dfffd</div>
    </div>
    <div style="width:50px; height:100px; display:inline">
        <div>fdsaf</div>
        <div>dfffd</div>
    </div>
</div>

------解决方案--------------------
<div style="width:250px; height:100px; overflow-x:scroll; white-space:nowrap">
   <div style="width:50px; height:100px; display:inline;float:left;">
       <div style="width:20px;float:left;">fdsaf</div>
       <div style="width:20px;float:left;">dfffd</div>
   </div>
   <div style="width:50px; height:100px; display:inline;float:left;">
       <div style="width:20px;float:left;">fdsaf</div>
       <div style="width:20px;float:left;">dfffd</div>
   </div>
   <div style="width:50px; height:100px; display:inline;float:left;">
       <div style="width:20px;float:left;">fdsaf</div>
       <div style="width:20px;float:left;">dfffd</div>
   </div>
   <div style="width:50px; height:100px; display:inline;float:left;">
       <div style="width:20px;float:left;">fdsaf</div>
       <div style="width:20px;float:left;">dfffd</div>
   </div>
   <div style="width:50px; height:100px; display:inline;float:left;">
       <div style="width:20px;float:left;">fdsaf</div>
       <div style="width:20px;float:left;">dfffd</div>
   </div>
</div>

------解决方案--------------------
只加<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 不行，不过对<a>写
style="dispaly:inline-block"就可以了你是一下，在IE下行，火狐下没测试


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">