div+css如何让超过屏幕宽度的时候不换行?
因为列比较多。希望能超过宽度的时候依然正常在一行显示。然后通过水平滚动条来查看右边超出的部分。请问如何实现？如何修改。如题代码如下:<!DOCTYPEhtmlPUBLIC...
因为列比较多。希望能超过宽度的时候依然正常在一行显示。然后通过水平滚动条来查看右边超出的部分。请问如何实现？如何修改。
如题代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
body{margin:auto;
font-size:12px;
line-height:25px;
}
#title{
text-align:center;
width:100%;
height:25px;
background-color:#999;
}
#tr{float:left;width:100%; height:auto;border-bottom:1px #999 dashed;}
#td{float:left;margin:0 10px 0 10px;}
#content{width:100%;}
</style>
<body>
<div id="content">
<div id="title">
<div id="td">这里是第一列</div>
<div id="td">这里是第二列</div>
<div id="td">这里是第三列</div>
<div id="td">这里是第四列</div>
<div id="td">这里是第五列</div>
<div id="td">这里是第六列</div>
<div id="td">这里是第七列</div>
<div id="td">这里是第八列</div>
<div id="td">这里是第九列</div>
<div id="td">这里是第十列</div>
<div id="td">这里是第十一列</div>
<div id="td">这里是第十二列</div>
<div id="td">这里是第十三列</div>
<div id="td">这里是第十四列</div>
<div id="td">这里是第十五列</div>
<div id="td">这里是第十六列</div>
<div id="td">这里是第十七列</div>
<div id="td">这里是第十八列</div>
<div id="td">这里是第十九列</div>
<div id="td">这里是第二十列</div>
</div>
<div id="tr">
<div id="td">这里是第一列</div>
<div id="td">这里是第二列</div>
<div id="td">这里是第三列</div>
<div id="td">这里是第四列</div>
<div id="td">这里是第五列</div>
<div id="td">这里是第六列</div>
<div id="td">这里是第七列</div>
<div id="td">这里是第八列</div>
<div id="td">这里是第九列</div>
<div id="td">这里是第十列</div>
<div id="td">这里是第十一列</div>
<div id="td">这里是第十二列</div>
<div id="td">这里是第十三列</div>
<div id="td">这里是第十四列</div>
<div id="td">这里是第十五列</div>
<div id="td">这里是第十六列</div>
<div id="td">这里是第十七列</div>
<div id="td">这里是第十八列</div>
<div id="td">这里是第十九列</div>
<div id="td">这里是第二十列</div>
</div>
<div id="tr">
<div id="td">这里是第一列</div>
<div id="td">这里是第二列</div>
<div id="td">这里是第三列</div>
<div id="td">这里是第四列</div>
<div id="td">这里是第五列</div>
<div id="td">这里是第六列</div>
<div id="td">这里是第七列</div>
<div id="td">这里是第八列</div>
<div id="td">这里是第九列</div>
<div id="td">这里是第十列</div>
<div id="td">这里是第十一列</div>
<div id="td">这里是第十二列</div>
<div id="td">这里是第十三列</div>
<div id="td">这里是第十四列</div>
<div id="td">这里是第十五列</div>
<div id="td">这里是第十六列</div>
<div id="td">这里是第十七列</div>
<div id="td">这里是第十八列</div>
<div id="td">这里是第十九列</div>
<div id="td">这里是第二十列</div>
</div>
</div>
</body>
</html>
枫叶舞秋山 的这个我查过。也测试了。不行。希望能改好确定能用哦。。。
天是天 说的完全没用。。。 展开
如题代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
body{margin:auto;
font-size:12px;
line-height:25px;
}
#title{
text-align:center;
width:100%;
height:25px;
background-color:#999;
}
#tr{float:left;width:100%; height:auto;border-bottom:1px #999 dashed;}
#td{float:left;margin:0 10px 0 10px;}
#content{width:100%;}
</style>
<body>
<div id="content">
<div id="title">
<div id="td">这里是第一列</div>
<div id="td">这里是第二列</div>
<div id="td">这里是第三列</div>
<div id="td">这里是第四列</div>
<div id="td">这里是第五列</div>
<div id="td">这里是第六列</div>
<div id="td">这里是第七列</div>
<div id="td">这里是第八列</div>
<div id="td">这里是第九列</div>
<div id="td">这里是第十列</div>
<div id="td">这里是第十一列</div>
<div id="td">这里是第十二列</div>
<div id="td">这里是第十三列</div>
<div id="td">这里是第十四列</div>
<div id="td">这里是第十五列</div>
<div id="td">这里是第十六列</div>
<div id="td">这里是第十七列</div>
<div id="td">这里是第十八列</div>
<div id="td">这里是第十九列</div>
<div id="td">这里是第二十列</div>
</div>
<div id="tr">
<div id="td">这里是第一列</div>
<div id="td">这里是第二列</div>
<div id="td">这里是第三列</div>
<div id="td">这里是第四列</div>
<div id="td">这里是第五列</div>
<div id="td">这里是第六列</div>
<div id="td">这里是第七列</div>
<div id="td">这里是第八列</div>
<div id="td">这里是第九列</div>
<div id="td">这里是第十列</div>
<div id="td">这里是第十一列</div>
<div id="td">这里是第十二列</div>
<div id="td">这里是第十三列</div>
<div id="td">这里是第十四列</div>
<div id="td">这里是第十五列</div>
<div id="td">这里是第十六列</div>
<div id="td">这里是第十七列</div>
<div id="td">这里是第十八列</div>
<div id="td">这里是第十九列</div>
<div id="td">这里是第二十列</div>
</div>
<div id="tr">
<div id="td">这里是第一列</div>
<div id="td">这里是第二列</div>
<div id="td">这里是第三列</div>
<div id="td">这里是第四列</div>
<div id="td">这里是第五列</div>
<div id="td">这里是第六列</div>
<div id="td">这里是第七列</div>
<div id="td">这里是第八列</div>
<div id="td">这里是第九列</div>
<div id="td">这里是第十列</div>
<div id="td">这里是第十一列</div>
<div id="td">这里是第十二列</div>
<div id="td">这里是第十三列</div>
<div id="td">这里是第十四列</div>
<div id="td">这里是第十五列</div>
<div id="td">这里是第十六列</div>
<div id="td">这里是第十七列</div>
<div id="td">这里是第十八列</div>
<div id="td">这里是第十九列</div>
<div id="td">这里是第二十列</div>
</div>
</div>
</body>
</html>
枫叶舞秋山 的这个我查过。也测试了。不行。希望能改好确定能用哦。。。
天是天 说的完全没用。。。 展开
展开全部
最外层的div.outdiv:样式width: 100%;overflow-x: auto
里面一层div.indiv:样式overflow: visible;white-space: nowrap;
.indiv里面放元素div.item,样式:width: 100px;height: 100px;display: inline-block;margin-right: 25px;background:#000
里面一层div.indiv:样式overflow: visible;white-space: nowrap;
.indiv里面放元素div.item,样式:width: 100px;height: 100px;display: inline-block;margin-right: 25px;background:#000
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
