外层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. 让Json更懂中文(JSON_UNESCAPED_UNICODE)

    我们知道, 用PHP的json_encode来处理中文的时候, 中文都会被编码, 变成不可读的, 类似”\u***”的格式, 还会在一定程度上增加传输的数据量. <?php echo json_ ...

  2. js获取视频截图

    参考:https://segmentfault.com/q/1010000006717959问题:a.获取的好像是第一帧的图?第一帧为透明图时,获取的个透明图片b.得先加载视频到video,做视频上传 ...

  3. Struts2_day04讲义_使用Struts2完成用户登录的权限拦截器的代码编写

  4. postgres外部表之-oracle_fdw

    1. 安装Oracle客户端工具 编译安装oracle_fdw之前,需要安装Oracle的客户端程序:步骤略 下载地址:http://www.oracle.com/technetwork/databa ...

  5. Android开发--ZZ:Android APK反编译详解（附图）

    最近看了很多app的界面和交互非常棒,想学习下他们的源码,简单加压apk文件得到的资源文件和源码都不可读 它们都是编译后的文件,在网上搜索了下,发现这篇blog提到的工具都非常好用~ 文章原地址:ht ...

  6. this关键字制定对象的属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vc 关于局部刷新

    在绘制图像对象的时候,时刻获取其所占范围大小,并使用InvalidateRect( m_rectRefresh);刷新,但是光这样还是不行的要在onDraw()函数里获取PAINTSTRUCT结构的无 ...

  8. 基于WordNet的英文同义词、近义词相似度评估及代码实现

    源码地址:https://github.com/XBWer/WordSimilarity 1.确定要解决的问题及意义 在基于代码片段的分类过程中,由于程序员对数据变量名的选取可能具有一定的规范性,在某 ...

  9. STL 迭代器 iterator const

    STL迭代器很多时候可以当成指针来使用. 但是指针一般可以用const来控制访问. 那迭代器呢. #include <iostream> #include <vector> u ...

  10. 九度OJ小结2

    由于安排问题,距离上次小结时间已经过去很久.导致这次小结的内容很多. 本次小结涉及到主要内容如下所示: 基于并查集操作的最小生成树问题(prime算法或者kruskal算法): 最短路径问题(Floy ...