外层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. Java显示指定类型的文件

    文件作为存储数据的单元,会根据数据类型产生很多分类,也就是所谓的文件类型.在对数据文件进行操作时,常常需要根据不同的文件类型来作不同的处理.本实例实现的是读取文件夹指定类型的文件并显示到表格控件中.这 ...

  2. 10 -- 深入使用Spring -- 5...1 使用Quartz

    10.5.1 使用Quartz JDK为简单的任务调度提供了Timer支持. Quartz是一个任务调度框架.借助于Cron表达式,Quartz可以支持各种复杂的任务调度. 1.下载和安装Quartz ...

  3. ios开发之--tableview单选/多选实现（非tableview的editing状态）及默认选中

    实现思路比较简单,这里仅做记录: 直接上代码: 1,实现didSelectRowAtIndexPath方法 -(void)tableView:(UITableView *)tableView didS ...

  4. 解决SOCKET通信 ERROR_INSUFFICIENT_BUFFER错误

    错误发生在服务端异步收到一个socket连接,之后使用WSAGetLastError()得到的IO错误码是122 这个错误码在系统中的解释是The data area passed to a syst ...

  5. Python 爬虫系列：糗事百科最热段子

    1.获取糗事百科url http://www.qiushibaike.com/hot/page/2/    末尾2指第2页 2.分析页面,找到段子部分的位置, 需要一点CSS和HTML的知识 3.编写 ...

  6. vs2010,vs2012如何连接vss2005,vss2008

    打开vs2010.依次打开[工具]-[选项]-[源代码管理] 这个时候可以看到管理插件中有Microsoft Visual SourceSafe选项(若没有该选项,重新安装VSS即可). 连接上项目后 ...

  7. 【代码审计】iZhanCMS_v2.1 后台任意文件删除漏洞分析

      0x00 环境准备 iZhanCMS官网:http://www.izhancms.com 网站源码版本:爱站CMS(zend6.0) V2.1 程序源码下载:http://www.izhancms ...

  8. [转]linux下释放文件内存

    在Linux系统下,我们一般不需要去释放内存,因为系统已经将内存管理的很好.但是凡事也有例外,有的时候内存会被缓存占用掉,导致系统使用SWAP空间影响性能,此时就需要执行释放内存(清理缓存)的操作了. ...

  9. Jenkins构建触发器

       我们在执行Jenkins的项目构建的时候一般都是通过web管理界面中的”构建”来执行项目构建操作,但是除此之外我们还可以通过项目配置中的”构建触发器”来触发构建操作, 其中”构建触发器”有一种方 ...

  10. 《转载》Eclipse项目上传码云

    本文转载自http://blog.csdn.net/izzyliao/article/details/53074452 把Eclipse项目上传到码云的步骤: 1.登录码云:新建项目 2.输入项目名: ...