当前位置：首页 → 问答吧 → ul如何才能不换行

ul如何才能不换行

时间：2010-09-19

来源：互联网

ul怎么才能不换行，超出范围后，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> <style type="text/css"> *{margin:0;padding:0;font-size:12px;} .img-bar{width:500px;height:130px;background-color:#e6e9f2;border:1px solid #b5c2d2;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:5px 0 5px 5px;} .img-bar ul{float:left;} .img-bar li{clear:both;margin-right:5px;width:120px;list-style:none;} .img-bar .text{text-align:center;margin-top:5px;} </style> </head> <body> <div class="img-bar"> <ul><li><img src="http://ss5.sinaimg.cn/thumbnail/63340ef5g8f8479e5ce14&690" /></li><li class="text">命名1.jpg</li></ul> <ul><li><img src="http://ss5.sinaimg.cn/thumbnail/63340ef5g8f8479e5ce14&690" /></li><li class="text">命名1.jpg</li></ul> <ul><li><img src="http://ss5.sinaimg.cn/thumbnail/63340ef5g8f8479e5ce14&690" /></li><li class="text">命名1.jpg</li></ul> <ul><li><img src="http://ss5.sinaimg.cn/thumbnail/63340ef5g8f8479e5ce14&690" /></li><li class="text">命名1.jpg</li></ul> <ul><li><img src="http://ss5.sinaimg.cn/thumbnail/63340ef5g8f8479e5ce14&690" /></li><li class="text">命名1.jpg</li></ul> <ul><li><img src="http://ss5.sinaimg.cn/thumbnail/63340ef5g8f8479e5ce14&690" /></li><li class="text">命名1.jpg</li></ul> <ul><li><img src="http://ss5.sinaimg.cn/thumbnail/63340ef5g8f8479e5ce14&690" /></li><li class="text">命名1.jpg</li></ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: kitten421 发布时间: 2010-09-19

.img-bar{width:100%;

100% 就可以了吧

作者: panel 发布时间: 2010-09-19

.img-bar ul{ display:inline-block; *display:inline; zoom:1;}

以上样式能解决你的问题。
但你的 html 存在非常严重的问题，建议写成以下结构：

复制内容到剪贴板