外层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. MapWinGIS------引发类型为“System.Windows.Forms.AxHost+InvalidActiveXStateException”的异常

    转载:http://www.cnblogs.com/dzone/archive/2011/09/08/2171445.html

  2. Java 代码块：静态代码块、构造代码块、构造函数块

    Class : StaticFa package edu.bai.du.lime.staticCode; public class StaticFa { // 随着类的声明而执行 static { S ...

  3. 统计js数组中奇数元素的个数

    如何统计一个JS数组中奇数元素的个数呢? 这是群友提出的一个问题,大部分群友给出的是遍历 然后对2取模,得到最终结果. 这样的写法是最容易想得到的,那么有没有其他思路呢? 这里我提供另外一种思路,我们 ...

  4. Android图片的合成示例

    package com.example.demo; import android.os.Bundle; import android.app.Activity; import android.grap ...

  5. 在CentOS Linux下部署Activemq 5

    准备:安装之前首先安装jdk-1.7.x及以上版本 配置/etc/sysconfig/network文件 和/etc/hosts文件,把主机名的解析做清楚: 如: # cat /etc/sysconf ...

  6. O2O(online to offline)营销模式

    O2O营销模式又称离线商务模式,是指线上营销线上购买带动线下经营和线下消费.O2O通过打折.提供信息.服务预订等方式,把线下商店的消息推送给互联网用户,从而将他们转换为自己的线下客户,这就特别适合必须 ...

  7. 细说php的异常和错误处理机制

    再谈php错误与异常处理 讲的非常好 w3school php异常处理机制 php错误异常处理详解 注: 关注set_error_handler() set_exception_handler() r ...

  8. matplotlib包画基本的图

    画直线图 1.最简单的用法: import matplotlib.pyplot as plt import numpy as np x=np.linspace(-3,3,50) #在(-1,1)范围内 ...

  9. ANDROID – 單色漸層效果的改良 – GRADIENT SCRIMS（转）

    本篇是根據 +Roman Nurik 在 2014/11/24 發佈的一篇 G+ 而來.看到他發文後,起了好奇心,就根據他提出的方法嘗試著實作,並將之排列呈現,直接從視覺上做個比較. 他在 G+ 的發 ...

  10. es6 - class的学习

    http://es6.ruanyifeng.com/#docs/class:class Person { constructor{ //构造函数,里边放不被继承的私有属性和方法 this.proper ...