Javascript 如何在不中断的情况下保持图像列表成一行?
我有一个div容器,其宽度为150px。Javascript 如何在不中断的情况下保持图像列表成一行?,javascript,html,css,internet-explorer,Javascript,Html,Css,Internet Explorer,我有一个div容器,其宽度为150px。 div有一个表,其宽度随图像列表的内容而变化。 如果图像列表的大小大于150px,则将断开新行。 如何在不中断的情况下将图像列表保持成一行? 我们的代码可以在chrome上运行,但不能在IE9上运行。 以下是我的html代码。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/ht
div有一个表,其宽度随图像列表的内容而变化。
如果图像列表的大小大于150px,则将断开新行。
如何在不中断的情况下将图像列表保持成一行?
我们的代码可以在chrome上运行,但不能在IE9上运行。
以下是我的html代码。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>test</title>
<style text="text/css">
.thumbnail{
float:left;
}
.NoBreak{
white-space:nowrap;
word-break:keep-all
}
</style>
</head>
<body>
<div style='width:150px;overflow:hidden;border:1px solid #ff0000;'>
<table border='1' cellspacing='0' cellpadding='0'><tr height='40'><td nowrap class='NoBreak'>
<img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
<img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
<img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
<img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
<img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
<img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
<img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
<img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
<img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
<img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
</td></tr></table>
</div>
</body>
</html>
测试
.缩略图{
浮动:左;
}
诺布雷克先生{
空白:nowrap;
断字:保留所有
}
为什么要使用只有一个单元格/行的表?这应该是一个无序的列表。如果你想的话,你可以用CSS删除项目符号。ie喜欢在空白处破译。移除线路馈线为什么要使用表格?