外层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. Hadoop教程(五)Hadoop分布式集群部署安装

    Hadoop教程(五)Hadoop分布式集群部署安装 1 Hadoop分布式集群部署安装 在hadoop2.0中通常由两个NameNode组成,一个处于active状态,还有一个处于standby状态 ...

  2. Nexus5 破解电信关键步骤

    5儿子终于摔坏了,送去保养之后,发现之前已破解的电信3G竟然无效了,心碎!!!!!!!!!!!!!!!!!! 尝试恢复efs --还好有备份,备份万岁!!! 不行!继续尝试恢复!还是不行!再试!... ...

  3. MySQL---循环语句

    mysql 操作同样有循环语句操作,网上说有3中标准的循环方式: while 循环 . loop 循环和repeat循环.还有一种非标准的循环: goto. 鉴于goto 语句的跳跃性会造成使用的的思 ...

  4. SaltStack salt-ssh 用法

    以下在 master 操作: (1) 我们在安装部署 SaltStack 的时候,需要安装 salt 客户端,还要与 salt 服务端进行认证才能互相通信(2) 如果我们使用 salt-ssh 的方式 ...

  5. vue的首页渲染了两次的原因以及解决方法

    现在在用vue做一些单页面应用的东西,遇到了些许问题啊,比如我再渲染首页的时候,会渲染两次,查看了一下原因,原来是在写路由的时候写的格式错了: 这样的时候,初始的时候就是加载的exam_list页面, ...

  6. 关于MFLAGS与MAKEFLAGS

    与子make通讯的选项 诸如‘-s’和‘-k’标志通过变量MAKEFLAGS自动传递给子make.该变量由make自动建立,并包含make收到的标志字母.所以,如果您是用‘make –ks’变量MAK ...

  7. 《C++ Primer Plus》16.1 string类 学习笔记

    16.1.1 构造字符串程序清单16.1使用了string的7个构造函数.程序清单16.1 str1.cpp---------------------------------------------- ...

  8. iOS 沙盒目录结构及正确使用

    前言:处于安全考虑,iOS系统的沙盒机制规定每个应用都只能访问当前沙盒目录下面的文件(也有例外,比如在用户授权情况下访问通讯录,相册等),这个规则展示了iOS系统的封闭性.在开发中常常需要数据存储的功 ...

  9. mysql在命令行模式下创建数据库时要显式指定字符集

    create database db1 DEFAULT CHARACTER SET utf8 COLLATE utf8_chinese_ci;

  10. shell编程（一）

    迷迷糊糊中发现了一个学习shell的非常好的教程,从头到尾看了一下,等看完全忘记了,没办法只能记录下来,教程网址http://c.biancheng.net/cpp/view/6994.html 以前 ...