如何使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) ...
随机推荐
- Java显示指定类型的文件
文件作为存储数据的单元,会根据数据类型产生很多分类,也就是所谓的文件类型.在对数据文件进行操作时,常常需要根据不同的文件类型来作不同的处理.本实例实现的是读取文件夹指定类型的文件并显示到表格控件中.这 ...
- 10 -- 深入使用Spring -- 5...1 使用Quartz
10.5.1 使用Quartz JDK为简单的任务调度提供了Timer支持. Quartz是一个任务调度框架.借助于Cron表达式,Quartz可以支持各种复杂的任务调度. 1.下载和安装Quartz ...
- ios开发之--tableview单选/多选实现(非tableview的editing状态)及默认选中
实现思路比较简单,这里仅做记录: 直接上代码: 1,实现didSelectRowAtIndexPath方法 -(void)tableView:(UITableView *)tableView didS ...
- 解决SOCKET通信 ERROR_INSUFFICIENT_BUFFER错误
错误发生在服务端异步收到一个socket连接,之后使用WSAGetLastError()得到的IO错误码是122 这个错误码在系统中的解释是The data area passed to a syst ...
- Python 爬虫系列:糗事百科最热段子
1.获取糗事百科url http://www.qiushibaike.com/hot/page/2/ 末尾2指第2页 2.分析页面,找到段子部分的位置, 需要一点CSS和HTML的知识 3.编写 ...
- vs2010,vs2012如何连接vss2005,vss2008
打开vs2010.依次打开[工具]-[选项]-[源代码管理] 这个时候可以看到管理插件中有Microsoft Visual SourceSafe选项(若没有该选项,重新安装VSS即可). 连接上项目后 ...
- 【代码审计】iZhanCMS_v2.1 后台任意文件删除漏洞分析
0x00 环境准备 iZhanCMS官网:http://www.izhancms.com 网站源码版本:爱站CMS(zend6.0) V2.1 程序源码下载:http://www.izhancms ...
- [转]linux下释放文件内存
在Linux系统下,我们一般不需要去释放内存,因为系统已经将内存管理的很好.但是凡事也有例外,有的时候内存会被缓存占用掉,导致系统使用SWAP空间影响性能,此时就需要执行释放内存(清理缓存)的操作了. ...
- Jenkins构建触发器
我们在执行Jenkins的项目构建的时候一般都是通过web管理界面中的”构建”来执行项目构建操作,但是除此之外我们还可以通过项目配置中的”构建触发器”来触发构建操作, 其中”构建触发器”有一种方 ...
- 《转载》Eclipse项目上传码云
本文转载自http://blog.csdn.net/izzyliao/article/details/53074452 把Eclipse项目上传到码云的步骤: 1.登录码云:新建项目 2.输入项目名: ...