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

2012-09-15

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

如何让多个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">   
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style>
body
{
width:100%;height:100%;text-align:center
}

.div1
{
width:600px;height:400px;margin:40px auto;
background:#aaccff;overflow:auto;word-break:keep-all;white-space :nowrap;padding:15px 15px 0 15px;
}
.div2
{
width:100%;height:22px;line-height:22px;font-size:0px;border:1px solid #FF9900;word-break:keep-all;white-space :nowrap;border-right:0px;

}
input
{
width:12px;height:12px;margin:5px 5px 0px 5px;

}
a
{
font-size:12px;width:80px;border-right:1px solid #FF9900;height:100%;background:#aacc00; display:inline-block
}
img
{
width:14px;height:14px; margin:0 5px -4px 5px;
}
</style>

</head>

<body>
<div class="div1" id="div1">

<div class="div2">
<input  type="checkbox" id="input1"/>
<a style="border-left:1px solid #FF9900;">无皇帝</a>
<a>dddd</a>
<img src="../images/share/add.gif">
<a style="border-left:1px solid #FF9900;">dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
</div>
<div class="div2" style="border-top:0px">
<input  type="checkbox" id="input1"/>
<a style="border-left:1px solid #FF9900;">无皇帝</a>
<a>dddd</a>
<img src="../images/share/add.gif">
<a style="border-left:1px solid #FF9900;">dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>dddd</a>
<a>&nbsp;</a>
<a>&nbsp;</a>
<a>&nbsp;</a>
<a>&nbsp;</a>
<a>&nbsp;</a>
<a>&nbsp;</a>

</div>

</div>





</body>
</html>

[解决办法]
inline-block在IE块状元素下是可以hack掉的，先对块状元素使用 display:inline-block 属性，然后再在另一个CSS声明中将其设为display:inline，如：
.div1{display:inline-block;}
.div1{display:inline;}
这个.div1将使IE块状元素呈现inline-block的样式。

热点排行