如何使ul中li元素横向排列且不换行
外层div容器宽度固定，ul宽度随li（li宽度固定）的增加而撑开，但是当ul中li的宽度之和大于div时，ul没有撑开，而是li换行了，如何使li不换行？
解决方法：主要是外面容器设置为white-space：nowrap；li设置为display：inline-block；而不是float：left；
<!DOCTYPE html><html><head><style>#pic_list{display:block;white-space:nowrap;width:500px;overflow:auto;}#pic_list li{width:80px;height:80px;margin:3px;background:red;display:inline-block;}</style></head><div id="pic_list"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div></body></html>如何使ul中li元素横向排列且不换行的更多相关文章
- ul中li元素横向排列且不换行
ul { white-space: nowrap; } li { display: inline-block; } white-space 属性设置如何处理元素内的空白. normal 默认. ...
- JS对象 数组排序sort() sort()方法使数组中的元素按照一定的顺序排列。 语法: arrayObject.sort(方法函数)
数组排序sort() sort()方法使数组中的元素按照一定的顺序排列. 语法: arrayObject.sort(方法函数) 参数说明: 1.如果不指定<方法函数>,则按unicode码 ...
- ul中li分列显示
让ul中li分列显示,用li显示两列如下(要显视多列的自己想办法,哈哈): 2列 <ul> <li style="display:block;float:left;widt ...
- html中测试div、ul和li、table排列多个块
前面有三篇博文测试了这三种方式,一.相关博文:LODOP问答部分链接.该文用的是div定位,用的是所有小div相对于大div进行定位,大的div设置relative定位,小的设置absolute相对于 ...
- ul、li实现横向导航按钮
好久没写博客了,主要是懒得呼气都不想呼,上周分给我一个新的任务,就是自己新建一个系统,快速极限开发,虽然之前自己也做过小的系统,但毕竟是自己做,随着自己的心意做,没有做其他的限制等,现在呢是给公司做, ...
- Jquery和JS获取ul中li标签（转）
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...
- Jquery和JS获取ul中li标签
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...
- 用ul、li做横向导航
/* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...
- N个数组中所有元素的排列组合（笛卡尔积）算法
(1)N个数组对象中所有元素排列组合算法 private List<List<Object>> combineAlg(List<Object[]> nArray) ...
随机推荐
- Python基础教程学习笔记：第二章 列表和元组
1.序列中元素的索引: 第一个元素索引是0,第二个是1,依次递增 最后一个元素索引是-1,倒数第二个是-2,依次递减 2.序列(Sequence)的种类: 列表(list).元组(tuple).字符串 ...
- css背景图等比例缩放，盒子随背景图等比例缩放
很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤. ...
- Python "HTTP Error 403: Forbidden"
问题: 执行下面的语句时 def set_IPlsit(): url = 'https://www.whatismyip.com/' response = urllib.request.urlopen ...
- Django 添加应用
一个项目可以添加多个应用,可以使用以下两种方法来添加应用: [root@localhost web]$ python manage.py startapp blog [root@localhost w ...
- Nginx 访问控制
根据 IP 限制访问: location /admin/ { allow 192.168.1.1; allow 192.168.1.2; deny all; } 根据正则限制访问: location ...
- Splash evaljs() 方法
evaljs() 方法可以执行 JavaScript 代码并返回最后一条 JavaScript 语句的返回结果 function main(splash, args) splash:go(" ...
- map 集合的遍历
List<Map<String,Object>> autoReplyList= wechatService.queryAutoReplyByOrg(orgId); for(Ma ...
- vc2015编译paho.mqtt.c-1.1.0
vc2015打开“\paho.mqtt.c-1.1.0\Windows Build\Paho C MQTT APIs.sln” 将文件“\paho.mqtt.c-1.1.0\src\VersionIn ...
- creat-react-app 如何在组件中img的src引入图片路径？？
把图片文件夹放到public中,然后以这种方式来动态写路径: process.env.PUBLIC_URL + '/img/' + url + '.jpg'
- Lua中的控制结构
Lua提供了一组传统的.小巧的控制结构,包括用于条件执行的if,用于迭代的while.repeat和for.所有的控制结构都有意个显式的终止符:if.for和while以end作为结尾,repeat以 ...