外层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. 03python条件判断与缩进

    if...else...来实现 知识点: 1.多个流程使用elif xxxx : 2.if elif else的语句执行顺序从上而下,只要条件满足,if语句就结束了. 3. 缩进:其他语言用{}包含语 ...

  2. curl 上传文件

    1)在 php 5.5.0 之前,如果使用 @+文件路径的文件上传文件,具体看这里:http://www.cnblogs.com/tujia/p/5938463.html 2)php 5.5.0 之后 ...

  3. PHP字符串offset取值特性

    在PHP的代码基础上,PHP字符串offset取值特性,可以拿来利用,给PHP应用程序带来安全风险. 在PHP中,可以像操作数组一样操作字符串,字符串中的字符可以用类似数组结构中的方括号包含对应的数字 ...

  4. Linux init 命令

    init命令用于切换到指定的运行级别,用法如下: [root@localhost ~]# init //关机 [root@localhost ~]# init //切换到单用户模式/救援模式 [roo ...

  5. Qt打包部署程序自动查找依赖DLL工具windeployqt

    qt编译好一个exe程序之后,部署到一台没有开发环境的机器上,需要一起拷贝其依赖的dll文件.这时需要一个windeployqt工具来帮忙,因为手动拷贝的话容易遗漏. https://blog.csd ...

  6. 给TextView加上多彩效果：改变部分字体的大小和颜色

    转载请注明出处:http://blog.csdn.net/singwhatiwanna/article/details/18363899 前言 在实际使用中,有时候会遇到特殊需求,比如pm突发奇想,想 ...

  7. MDK972-EK开发板裸调试设置和裸机程序烧写（转）

    硬件平台:MDK972-EK开发板编译调试软件:KEIL uVision4仿真工具:JLINK V7/V8   本例子从串口输出信息,如图:       KEIL uVision4调试设置如图所示: ...

  8. URI跳转方式地图导航的代码实践

    本文转载至 http://adad184.com/2015/08/11/practice-in-mapview-navigation-with-URI/ 前言 之前介绍了我正在做的是一款定位主打的应用 ...

  9. java基础思维导图大全

  10. VS2008 SP1 安装卡在 VS90sp1-KB945140-X86-CHS的解决方法

    VS2008 SP1 安装卡在 VS90sp1-KB945140-X86-CHS的解决方法 VS2008 SP1 安装卡在 VS90sp1-KB945140-X86-CHS的解决方法 方法一:(不推荐 ...