外层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. js循环异常

    1.当在循环数组时,数组发生变化,循环item 为定义undifined $.each(blogMng.commonKit.upLoadMng.medias, function (index, ite ...

  2. 让树莓派自动上报IP地址到邮箱,二代B

    由于我使用树莓派的场景大多数是在没有显示器.只用terminal连接它的情况下,所以,它的IP地址有时会在重启之后变掉(DHCP的),导致我无法通过terminal连接上它.然后我又要很麻烦地登录路由 ...

  3. vuejs解析url地址

    函数: // url解析函数 // ?id=111&name=567 => {id:111,name:567} export function urlParse(){ let obj = ...

  4. C语言对文件的基本操作

    在C语言中,对于文件的操作是利用FILE结构体进行的. 几个常用的操作文件函数简介 1:打开文件 FILE *fopen( const char *filename, const char *mode ...

  5. Spring容器AOP的理解

    一句话理解:根据被代理对象信息通过Proxy动态生成我们具体的代理类. 实现就动态代理.那动态代理是什么呢? 动态代理其实并不是什么新鲜的东西,学过设计模式的人都应该知道代理模式,代理模式就是一种静态 ...

  6. Ansible 使用 Playbook 安装 Nginx

    思路:先在一台机器上编译安装好 Nginx,打包,然后通过 Ansible 下发 [root@localhost ~]$ cd /etc/ansible/ [root@localhost ansibl ...

  7. [Linux] 修改用户名密码

    1. 普通用户或root用户修改自身登录密码:在终端使用passwd命令. linaro@linaro-ubuntu-desktop:~$ passwd Changing password for l ...

  8. LVS+NGINX+TOMCAT_集群实施操作记录.docx

    LVS IP: Eth0:192.168.100.115 Eth1:192.168.100.215 Vi  /etc/init.d./lvs #!/bin/sh # # lvs      Start ...

  9. fastcgi模式下设置php最大执行时间

    php在执行中常见错误: The FastCGI process exceeded configured request timeout: FastCGI process exceeded confi ...

  10. 使用java连接数据库以后显示“ Establishing SSL connection without server's identity verification is not recommended”的警告如何解决

    今天写了一段查询数据库的操作,如下 package MySQL; import java.sql.*; public class MySQL { //JDBC驱动名以及数据库URL static fi ...