如何使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) ...
随机推荐
- NHibernate 集合映射深入 (第五篇) <set>,<list>,<map>,<bag>
一.集合外键 在NHibernate中,典型的用于映射集合类的元素有<set>,<list>,<map>,<bag>,<array>,< ...
- 教你解锁被锁住的苹果mac电脑的文件跟文件夹,同时也可删除被锁的文件跟文件夹(转)
在Mac OSX 下无法删除的文件可大概分为下列三种情形 1.档案(夹)被锁定 2.文件正在使用中 3.没有权限的档案(夹) 一.「 为什么档案会被锁定 」 1.个人自行替档案加上 2.在拷贝或是整理 ...
- [转]PHP判断字符串是纯英文、纯汉字或汉英混合(GBK)
PHP判断字符串是否为中文(或英文)的方法,除了正则表达式判断和拆分字符判断字符的值是否小于128 外还有一种比较特别的方法. 使用php中的mb_strlen和strlen函数判断 方法比较简单:分 ...
- 【安全开发】PHP安全编码规范
申明:本文非笔者原创,原文转载自:https://github.com/SecurityPaper/SecurityPaper-web/blob/master/_posts/2.SDL%E8%A7%8 ...
- linux clamav杀毒软件的安装
一.概述 Linux比其它操作系统更稳定更安全.理论上Linux是有可能被病毒侵害的.但实际上 Linux机器几乎不可能遭受病毒的攻击.所以我这里的问题是为什么要为Linux准备防病毒软件,为了更好理 ...
- 解决“”父级标签和子标签边框重叠,设置子标签的margin父标签会跟着移动“”的方法
1.可以给父标签一个padding,然后给一个很小的值,虽然不影响整体但是不建议使用 2.给父标签一个"over:hidden"的样式,推荐使用
- django进阶-1
前言: 各位久等了,django进阶篇来了. 一.get与post 接口规范: url不能写动词,只能写名词 django默认只支持两种方式: get, post get是获取数据 ?user=zcl ...
- Mysql错误:Duplicate entry '127' for key 'PRIMARY'的解决方法
有时候真是挺幸运,正当我自以为是地认为掌握了某个知识点的时候,现实就会马上出现另外一个问题,让我知道之前的认知是不全面的. 正如我上篇博文中所述,如果一个自增字段达到了上限,而且继续向里面插入数据的话 ...
- 布式实时日志系统(三) 环境搭建之centos 6.4下hadoop 2.5.2完全分布式集群搭建最全资料
最近公司业务数据量越来越大,以前的基于消息队列的日志系统越来越难以满足目前的业务量,表现为消息积压,日志延迟,日志存储日期过短,所以,我们开始着手要重新设计这块,业界已经有了比较成熟的流程,即基于流式 ...
- 题目1091:棋盘游戏(DFS)
题目链接:http://ac.jobdu.com/problem.php?pid=1091 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...