div+css如何让超过屏幕宽度的时候不换行?

liying520 2011-01-22 08:09:16
因为列比较多。希望能超过宽度的时候依然正常在一行显示。然后通过水平滚动条来查看右边超出的部分。请问如何实现？如何修改。

如题代码如下:


<!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>
...全文
657 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
辰岡墨竹 2011-01-26
  • 打赏
  • 举报
 回复
上述代码有点奇怪的问题，请去掉//注释内容再复制到HTML文件里，否则有的浏览器上会丢失背景色。
辰岡墨竹 2011-01-26
  • 打赏
  • 举报
 回复
td什么的是HTML保留的标签，没有必要用div，而且class才可以重复，id是不能重复的（虽然有的浏览器可以容忍）。另外LZ陷入一误区，虽然CSS+DIV布局倡导表示与数据分离，但是没有不要一切都用DIV来实现，呈现规则数据还是用表格比较好，而且语义清晰。


<!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">

*{margin:0; padding:0;}

body{font-size:12px; line-height:25px; width:100%;}

#content{overflow-x:auto; //显示水平滚动条}

#table1{border-collapse: collapse;  //合并相邻边框

    border-spacing: 0;  //表格边框为0

}

#table1 th{white-space: nowrap;  //单元格内不断行

    background-color:#999; font-weight:normal;

    padding:0 10px 0 10px;

}

#table1 td{white-space: nowrap;

    border-bottom:1px dashed #999;

    padding:0 10px 0 10px;

}

</style>

<body>

<div id="content">

<table id="table1">

<tr>

<th>这里是第一列</th> 

<th>这里是第二列</th> 

<th>这里是第三列</th> 

<th>这里是第四列</th> 

<th>这里是第五列</th> 

<th>这里是第六列</th> 

<th>这里是第七列</th> 

<th>这里是第八列</th> 

<th>这里是第九列</th> 

<th>这里是第十列</th> 

<th>这里是第十一列</th> 

<th>这里是第十二列</th> 

<th>这里是第十三列</th> 

<th>这里是第十四列</th> 

<th>这里是第十五列</th> 

<th>这里是第十六列</th> 

<th>这里是第十七列</th> 

<th>这里是第十八列</th> 

<th>这里是第十九列</th> 

<th>这里是第二十列</th> 

</tr> 

<tr>

<td>这里是第一列</td> 

<td>这里是第二列</td> 

<td>这里是第三列</td> 

<td>这里是第四列</td> 

<td>这里是第五列</td> 

<td>这里是第六列</td> 

<td>这里是第七列</td> 

<td>这里是第八列</td> 

<td>这里是第九列</td> 

<td>这里是第十列</td> 

<td>这里是第十一列</td> 

<td>这里是第十二列</td> 

<td>这里是第十三列</td> 

<td>这里是第十四列</td> 

<td>这里是第十五列</td> 

<td>这里是第十六列</td> 

<td>这里是第十七列</td> 

<td>这里是第十八列</td> 

<td>这里是第十九列</td> 

<td>这里是第二十列</td> 

</tr> 

<tr> 

<td>这里是第一列</td> 

<td>这里是第二列</td> 

<td>这里是第三列</td> 

<td>这里是第四列</td> 

<td>这里是第五列</td> 

<td>这里是第六列</td> 

<td>这里是第七列</td> 

<td>这里是第八列</td> 

<td>这里是第九列</td> 

<td>这里是第十列</td> 

<td>这里是第十一列</td> 

<td>这里是第十二列</td> 

<td>这里是第十三列</td> 

<td>这里是第十四列</td> 

<td>这里是第十五列</td> 

<td>这里是第十六列</td> 

<td>这里是第十七列</td> 

<td>这里是第十八列</td> 

<td>这里是第十九列</td> 

<td>这里是第二十列</td> 

</tr> 

</table>

</div>

</body>

</html>
JKelfin 2011-01-25
  • 打赏
  • 举报
 回复
<!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">
.td{white-space:nowrap;}
</style>
<body>
<div class="td"> 这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列 </div>
<div class="td"> 这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列</div>
</div>
</body>
</html>


总算有人回了，我可以跟正之前的格式错误。现在这个是可以跑得了
仲兴轩 2011-01-25
  • 打赏
  • 举报
 回复
外层div加滚动条，控制宽度，
就样超过宽度了，他就自动加上滚动条了，

wan
JKelfin 2011-01-25
  • 打赏
  • 举报
 回复
不好意思，上面的代码没排版好，主要是因为自己写了一个尽然有非法字符。。。。
JKelfin 2011-01-25
  • 打赏
  • 举报
 回复

<!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">
.td{white-space:nowrap;}
</style>
<body>
<div class="td">这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列这里是第一列</div>
<div class="td">这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列这里是第二列</div>
</div>
</body>
</html>
JKelfin 2011-01-25
  • 打赏
  • 举报
 回复
主要是white-space:nowrap
linshenxiu 2011-01-24
  • 打赏
  • 举报
 回复
如果列数固定的话就给父容器加一个宽度吧。
xq870723 2011-01-23
  • 打赏
  • 举报
 回复
<!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;
height:auto;
background-color:#999;
width:auto;
}
.tr{float:left; height:auto;border-bottom:1px #999 dashed; width:auto;}
.td{float:left;margin:0 10px 0 10px; width:100px;}
.content{width:700px;height:auto;}
.box{width:300px;overflow: scroll;}
</style>
<body>
<div class="box">
<div class="content">
<div class="title">
<div class="td">这里是第一列</div>
<div class="td">这里是第二列</div>
<div class="td">这里是第三列</div>
<div class="td">这里是第四列</div>
</div>
<div class="tr">
<div class="td">这里是第一列</div>
<div class="td">这里是第二列</div>
<div class="td">这里是第三列</div>
<div class="td">这里是第四列</div>
</div>
</div>
</div>
</body>
</html>
ms 2011-01-23
  • 打赏
  • 举报
 回复
能超过宽度的时候依然正常在一行显示

你这句话我不理解，你指的是什么宽度？
ms 2011-01-23
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 max_single 的回复:]

你进入一个误区，ID不过重复，应该用class。还有td不应该用div来包含，没必要。
[/Quote]
ID不能重复
ms 2011-01-23
  • 打赏
  • 举报
 回复
你进入一个误区，ID不过重复，应该用class。还有td不应该用div来包含，没必要。
div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...
当一行文字超过DIV或者Table的宽度的时候，浏览器中默认是让它换行显示的，如果我们不想让他换行显示那要怎么办呢，下面为大家介绍下如何设置div+CSS设置一行内文字超过宽度不换行且不显示
div+CSS设置一行内文字超过宽度不换行且不显示截断文字加…
当一行文字超过DIV或者Table的宽度的时候，浏览器中默认是让它换行显示的，如果我们不想让他换行显示那要怎么办呢？看到这个标题很容易就会想到截断文字加“…”的做法。 一般的文字截断(适用于内联与块)： ==============CSS================ 复制代码代码如下: .text-overflow{ display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ t
html+div+css初级入门到制作企业站视频课程
本套html,div&css;课程完全初级, 通过学习DIV+CSS, 了解分清html div css三者关联&作用,通过一个企业站首页排版掌握html,div+css
div超出不换行_css怎么设置div超出不换行？
css怎么设置div超出不换行？下面本篇文章就来给大家介绍一下使用CSS设置div超出不换行的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。在css中，可以使用white-space属性来让div超出的内容不换行；通常我们使用white-space:nowrap来强制文本文字内容不换行，文本会在在同一行上显示，直到遇到 标签为止。white-space属性设置或检索对象内...
html 数字自动换行,css怎么让连续数字字母强制换行？
在div+css布局中，在div、p、h2、h1等盒子里连续英文字母或连续数字会排成一排显示不会自动随盒子宽度限制而自动换行。那么怎么让连续数字字母强制换行？下面给大家介绍一下。中文字在DIV或任意盒子中均会自动换行不需要CSS样式实现，只有连续的字母或数字会出现不自动换行问题，所以需要CSS解决。英文字母或数字在DIV不换行溢出DIV的问题效果截图：css怎么让连续数字字母强制换行？在CSS中，...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章