如何使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) ...
随机推荐
- 数据注解特性--NotMapped
NotMapped特性可以应用到领域类的属性中,Code-First默认的约定,是为所有带有get,和set属性选择器的属性创建数据列.. NotManpped特性打破了这个约定,你可以使用NotMa ...
- actor mysql 持久化之 specified actor
持久化到mysql,要求一次操作涉及到的多次读写的事务性.使用的 library 是 postgresql-async, akka 版本是 2.11. 1. 实现 per-user 逻辑,简单来讲,就 ...
- Nginx 访问日志
配置访问日志: [root@localhost ~]$ cat /usr/local/nginx/conf/nginx.conf http { log_format main '$remote_add ...
- VS调试DLL代码使用”附加到进程“
如果一个DLL解决方案,被另一个DLL2解决方案依赖,DLL2被可执行程序exe1引用 如何调试DLL的代码断点呢 1.可以参考另一篇随笔DLL如何调试 2.先运行起来exe1,然后再DLL项目中”调 ...
- 微信小程序的wx-charts插件
还有就是可以使用一些小程序的插件,比如wx-charts. 先来看一下网上对这个插件的评价: 目前在github上有1804颗星,使用的比较广泛. github地址:https://github.co ...
- 设置ADB网络连接目标板
adb connect 网络连接目标板报错,原因参考[http://ytydyd.blog.sohu.com/146260552.html].而且指定 adb connect <IP>:5 ...
- String例子
#include <string.h> class String{ public: String(const String& str); String(const char* st ...
- 【大数据系列】MapReduce示例好友推荐
package org.slp; import org.apache.hadoop.io.LongWritable; import org.apache.hadoop.io.Text; import ...
- commander.js 制作简易的 MINA CLI 脚手架
出发点并不是小程序本身,是想要做一个脚手架(command-line interface),看过 VUE / REACT 脚手架,觉得很厉害,但是并不太知道里面是怎么做成的,所以最近研究了研究,看能不 ...
- excel多个sheet表拆分成独立的excel文件
一.问题: 公司做一个项目,给的用户上报文是一个包含多个sheet页的excel文件, 但是在实际处理报文数据的时候需要拆分excel文件为多个独立的报文excel文件 二.解决: (1)一个一个的复 ...