外层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元素横向排列且不换行的更多相关文章

  1. ul中li元素横向排列且不换行

    ul { white-space: nowrap; } li { display: inline-block; }     white-space 属性设置如何处理元素内的空白. normal 默认. ...

  2. JS对象 数组排序sort() sort()方法使数组中的元素按照一定的顺序排列。 语法: arrayObject.sort(方法函数)

    数组排序sort() sort()方法使数组中的元素按照一定的顺序排列. 语法: arrayObject.sort(方法函数) 参数说明: 1.如果不指定<方法函数>,则按unicode码 ...

  3. ul中li分列显示

    让ul中li分列显示,用li显示两列如下(要显视多列的自己想办法,哈哈): 2列 <ul> <li style="display:block;float:left;widt ...

  4. html中测试div、ul和li、table排列多个块

    前面有三篇博文测试了这三种方式,一.相关博文:LODOP问答部分链接.该文用的是div定位,用的是所有小div相对于大div进行定位,大的div设置relative定位,小的设置absolute相对于 ...

  5. ul、li实现横向导航按钮

    好久没写博客了,主要是懒得呼气都不想呼,上周分给我一个新的任务,就是自己新建一个系统,快速极限开发,虽然之前自己也做过小的系统,但毕竟是自己做,随着自己的心意做,没有做其他的限制等,现在呢是给公司做, ...

  6. Jquery和JS获取ul中li标签（转）

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  7. Jquery和JS获取ul中li标签

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  8. 用ul、li做横向导航

    /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...

  9. N个数组中所有元素的排列组合（笛卡尔积）算法

    (1)N个数组对象中所有元素排列组合算法 private List<List<Object>> combineAlg(List<Object[]> nArray) ...

随机推荐

  1. SpringBoot------使用Fastjson解析Json数据

    方法一: 1.在pom.xml文件下添加依赖包 <dependency> <groupId>com.alibaba</groupId> <artifactId ...

  2. 如何将数组中的后面m个数移动为前面m个数

    思路分析: 可以通过递归的方法实现调整: (1)将前n-m个元素的顺序颠倒. (2)将后面m个元素的顺序颠倒. (3)将n个元素的顺序全部颠倒. 通过以上3个步骤的执行,就可以把数组的元素颠倒. 代码 ...

  3. 【视频】ffmpeg mov mp4 m3u8 ts

    1.https://ffmpeg.zeranoe.com/builds/ 2.https://blog.csdn.net/psh18513234633/article/details/79312607 ...

  4. 【代码审计】QYKCMS_v4.3.2 后台down.php页面代码执行漏洞分析

      0x00 环境准备 QYKCMS官网:http://www.qykcms.com/ 网站源码版本:QYKCMS_v4.3.2(企业站主题) 程序源码下载:http://bbs.qingyunke. ...

  5. SaltStack 使用 Jinja2 模板

    Jinja2 是基于 python 的一个模板引擎,如下,使用 Jinja2 实现根据不同的操作系统分发不同的文件: [root@localhost ~]$ cat /srv/salt/test.sl ...

  6. python --->字典 集合 学习笔记

    1.字典--->创建空字典:dict={} broa=["李宁",”耐克“,“阿迪达斯”,“鱼c工作室”] sloga=[“A”,“B”,“C”,“D”] dict={&qu ...

  7. 扩展方法以及LinQ的学习

    我们今天学习的内容其实还是蛮多的,学习了自动属性,扩展方法,复习初始化器,以及LinQ的一些方法,其实感觉有些还是很熟悉的,在前面的学习过程中有时间感觉学习的知识知道了怎么使用,但是还没有在项目中使用 ...

  8. （转载）Recyclerview | Intent与Bundle在传值上的区别 | 设置布局背景为白色的三种方法

    用Recyclerview实现列表分组.下拉刷新以及上拉加载更多  http://www.jianshu.com/p/be62ce21ea57 Intent与Bundle在传值上的区别http://b ...

  9. 在apache虚拟目录配置

    在apache虚拟目录配置中 <VirtualHost *:80>xxx xxx xxx</VirtualHost> 不能写成 <VirtualHost *>xxx ...

  10. 【转载】6种.net分布式缓存解决方案

    . 使用内置ASP.NET Cache (System.Web.Caching) : https://msdn.microsoft.com/en-us/library/system.web.cachi ...