外层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. CentOS7图形界面启动报错unable to connect to X server

    以前还可以正常启动图形界面,这次启动失败,报错unable to connect to X server 使用的是oracle用户,因为我是在oracle用户下创建的oracle数据库等 解决办法: ...

  2. 02python程序和用户交互

    在写程序时,使用python的内置函数来获取用户输入的值. >>> name = input("Input your name:")Input your name ...

  3. TCP三次握手原则

    “已失效的连接请求报文段”的产生在这样一种情况下: client发出的第一个连接请求报文段并没有丢失,而是在某个网络结点长时间的滞留了,以致延误到连接释放以后的某个时间才到达server. 本来这是一 ...

  4. Ubuntu 13.10 下安装搜狗输入法

    1.卸载ibus输入法: sudo apt-get remove ibus     sudo为取得root权限的意思,Ubuntu系统默认root账户关闭,很多操作需要取得root     权限才可以 ...

  5. 谁在用 Hadoop

    谁在用 Hadoop这是个问题.在大数据背景下,Apache Hadoop已经逐渐成为一种标签性,业界对于这一开源分布式技术的了解也在不断加深.但谁才是 Hadoop的最大用户呢?首先想到的当然是它的 ...

  6. JSPatch 部署安全策略

    本文转载至 http://blog.cnbang.net/tech/2879/ 使用 JSPatch 有两个安全问题: 传输安全:JS 脚本可以调用任意 OC 方法,权限非常大,若被中间人攻击替换代码 ...

  7. 七、K3 WISE 开发插件《Update字段级更新触发器 - BOS单审核后反写源单》

    审核成功触发,是一个比较典型的场景.需要用到update触发器,跟踪到审核状态的变化. 引用的源码<采购检验单审核后反写收料通知单>,其中采购检验单是BOS自定义单据. if (objec ...

  8. Android开发进阶从小工到专家之性能优化

  9. android studio下生成jni头文件

    cd app/src/main javah -d jni -classpath ../../build/intermediates/classes/debug net.sourceforge.lame ...

  10. C语言程序设计--类型转换

    变量定义 int var_int = 111111111; char var_char = '2'; double var_double = 3.30; float var_float = 4.80; ...