如何使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) ...
随机推荐
- 让Json更懂中文(JSON_UNESCAPED_UNICODE)
我们知道, 用PHP的json_encode来处理中文的时候, 中文都会被编码, 变成不可读的, 类似”\u***”的格式, 还会在一定程度上增加传输的数据量. <?php echo json_ ...
- js获取视频截图
参考:https://segmentfault.com/q/1010000006717959问题:a.获取的好像是第一帧的图?第一帧为透明图时,获取的个透明图片b.得先加载视频到video,做视频上传 ...
- Struts2_day04讲义_使用Struts2完成用户登录的权限拦截器的代码编写
- postgres外部表之-oracle_fdw
1. 安装Oracle客户端工具 编译安装oracle_fdw之前,需要安装Oracle的客户端程序:步骤略 下载地址:http://www.oracle.com/technetwork/databa ...
- Android开发--ZZ:Android APK反编译详解(附图)
最近看了很多app的界面和交互非常棒,想学习下他们的源码,简单加压apk文件得到的资源文件和源码都不可读 它们都是编译后的文件,在网上搜索了下,发现这篇blog提到的工具都非常好用~ 文章原地址:ht ...
- this关键字制定对象的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vc 关于局部刷新
在绘制图像对象的时候,时刻获取其所占范围大小,并使用InvalidateRect( m_rectRefresh);刷新,但是光这样还是不行的要在onDraw()函数里获取PAINTSTRUCT结构的无 ...
- 基于WordNet的英文同义词、近义词相似度评估及代码实现
源码地址:https://github.com/XBWer/WordSimilarity 1.确定要解决的问题及意义 在基于代码片段的分类过程中,由于程序员对数据变量名的选取可能具有一定的规范性,在某 ...
- STL 迭代器 iterator const
STL迭代器很多时候可以当成指针来使用. 但是指针一般可以用const来控制访问. 那迭代器呢. #include <iostream> #include <vector> u ...
- 九度OJ小结2
由于安排问题,距离上次小结时间已经过去很久.导致这次小结的内容很多. 本次小结涉及到主要内容如下所示: 基于并查集操作的最小生成树问题(prime算法或者kruskal算法): 最短路径问题(Floy ...