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>
枫叶舞秋山 的这个我查过。也测试了。不行。希望能改好确定能用哦。。。
天是天 说的完全没用。。。 展开
6个回答
展开全部
#td{overflow-x :auto; width:10px;float:left;margin:0 10px 0 10px}
基本语法
overflow-x : visible | auto | hidden | scroll
语法取值
visible : 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，
对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效
auto : 在必需时对象内容才会被裁切或显示横向滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示横向滚动条
基本语法
overflow-x : visible | auto | hidden | scroll
语法取值
visible : 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，
对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效
auto : 在必需时对象内容才会被裁切或显示横向滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示横向滚动条
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给你的#content固定个宽度，可以容纳下三个div的宽度，然后加个overflow:hidden;你#title没有做漂浮，同样级别的框架，你其他两个#tr的做了漂浮了，还有你#td做了漂浮了，#title里面的text-align:center;等于作废了，没必要再加这个了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
固定div宽度，不要用100%这类相对单位，或者用white-spacing: nowrap; 就是不换行的意思。再就是每一个页面的ID是唯一的，你这写法很容易出问题。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给行或列加上固定宽度，超出时就会自动换行了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<title>
</title>
<head>
<style>
ul
body{ margin:0; padding:0; margin:0 auto;
}
#1 { width:300px;
}
#1 ul li { float:left; text-decoration:none;
}
</style>
</head>
<body>
<div id="1">
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
<ul>
<li><a href="#"><img scr="" width:50px height:50px /></a></li>
<li><img scr="" width:50px height:50px /></li>
<li><img scr="" width:50px height:50px /></li>
<li><img scr="" width:50px height:50px /></li>
<li><img scr="" width:50px height:50px /></li>
</ul>
</div>
</body>
</html>
是要这样吗?
<title>
</title>
<head>
<style>
ul
body{ margin:0; padding:0; margin:0 auto;
}
#1 { width:300px;
}
#1 ul li { float:left; text-decoration:none;
}
</style>
</head>
<body>
<div id="1">
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
<ul>
<li><a href="#"><img scr="" width:50px height:50px /></a></li>
<li><img scr="" width:50px height:50px /></li>
<li><img scr="" width:50px height:50px /></li>
<li><img scr="" width:50px height:50px /></li>
<li><img scr="" width:50px height:50px /></li>
</ul>
</div>
</body>
</html>
是要这样吗?
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
