我们都知道float：left属性会让元素向左浮动，如果用一个div将几个左浮动的li包起来，是不是div的宽度被li撑得很长很长呢，代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            ul {

                border: 1px solid #1FC195;

                list-style: none;

                margin: 0;

                padding: 0;

                background-color: #CCCCCC;

            }

            ul li {

                padding: 0;

                margin: 0;

                float: left;

                width: 300px;

                height: 600px;

                background: #8FBC8F;

                margin: 5px;

            }

        </style>

    </head>

    <body>

        <div class="over-x">

            <ul>

                <li>test1</li>

                <li>test2</li>

                <li>test3</li>

                <li>test3</li>

                <li>test3</li>

                <li>test3</li>

                <li>test3</li>

            </ul>

        </div>

    </body>

</html>

但是实际的显示效果却是：

可以看见div的宽度不是被div撑得很长，二是直接换行了，

由此对float：left属性进行了一些总结：当给元素用了float属性，元素会自动寻找最近一级的父级的宽度，当这个父级的宽度不能满足li所有的宽度和之后就会排到第二行，如果给这个父级足够的宽度之后（一个>=li总和的宽度）便能实现该效果

这时候要是给那个父级增加一个父级（这个父级给一个较小的宽度，并且设置overflow-x:scroll）便可以再水平方向出现滚动条

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

        .over-x{

            width:600px;

            overflow:scroll ;

        }

            ul{

                border: 1px solid #1FC195;

                list-style: none;

                margin: 0;

                padding: 0;

                background-color: #CCCCCC;

                overflow-x: scroll;

                overflow-y: hidden;

                height: 610px;

                width:19000px

            }

            ul li{

                padding: 0;

                margin: 0;

                float: left;

                width: 300px;

                height: 600px;

                background: #8FBC8F;

                margin: 5px;

            }

        </style>

    </head>

    <body>

        <div class="over-x">

            <ul>

                <li>test1</li>

                <li>test2</li>

                <li>test3</li><li>test3</li><li>test3</li><li>test3</li><li>test3</li>

            </ul>

        </div>

    </body>

</html>

效果

由overflow-x:scroll产生的收获的更多相关文章

  1. overflow： scroll

    overflow: scroll在安卓5.0的情况下,不论内容是否填满屏幕,都会强制解析出滚动条,所以最好是使用overflow: auto

  2. iOS 对overflow：scroll使用

    让子标签的高度在初始化的时候就比父标签大,可以设置height: 101%:这样就出发了内置的scrollview的滚动. -webkit-overflow-scrolling:touch;可以让滚动 ...

  3. CSS深入理解之overflow

    CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...

  4. 深入理解CSS溢出overflow

    × 目录 [1]定义 [2]属性 [3]失效[4]应用 前面的话 当一个元素固定为某个特定大小,但内容在元素中放不下.此时就可以利用overflow属性来控制这种情况 定义 overflow溢出 值: ...

  5. 深入了解overflow

    1.如果overflow-x与overflow-y值不同   其中一个赋值为visiable,另一个赋值scroll/auto/hidden,那么visiable会重置为auto 2.overflow ...

  6. 关于scroll无法绑定的问题

    关于jQuery的scroll([[data],fn])事件, 概述是:当用户滚动指定的元素(元素包括:所有可滚动的元素和 window 对象)时,会触发该事件. 如绑定窗口对象: $(window) ...

  7. CSS.04 -- 浮动float、overflow、定位position、CSS初始化

    标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...

  8. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  9. 前端学习 -- Css -- overflow

    子元素默认是存在于父元素的内容区中,理论上讲子元素的最大可以等于父元素内容区大小.如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示,超出父元素的内容,我们称为溢出的内容.父元 ...

随机推荐

  1. linux第二天

    由于今天公司事情比较多,今天基本没有自学.了解了一下type命令:主要是显示命令类型的命令.linux命令分为内置命令和外部命令两种.内置命令就shell内置的命令,外部命令,就是需要有系统存在一个名 ...

  2. 【GitHub Desktop】MacOS和Win下配置及简单的使用

    一. GitHub介绍 1.GitHub 是为开发者提供 Git 仓库的托管服务.这是一个让开发者与朋友.同事.同学及陌生人共享代码的完美场所. 总结一下,GitHub 最大的特征是"面向人 ...

  3. Oracle客户端工具出现“Cannot access NLS data files or invalid environment specified”错误的解决办法

    Oracle客户端工具出现"Cannot access NLS data files or invalid environment specified"错误的解决办法 方法一:参考 ...

  4. iOS self

    如果self在对象方法中 那么self就代表调用当前对象方法的那个对象 如果self在类方法中 那么self就代表调用当前类方法的那个类 总结:self的使用只需关注self在哪个方法中 如果在类方法 ...

  5. JSP复习整理（二）基本语法

    最基础的整理.. 一.语句声明 <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...

  6. Windows 搭建jdk、Tomcat、eclipse以及SVN、maven插件开发环境

    未经允许,不得转载 Jdk1.7安装 jdk下载地址 http://www.oracle.com/technetwork/java/javase/downloads/index.html 安装jdk之 ...

  7. js获取文档高度

    网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...

  8. ios htttp网络请求cookie的读取与写入(NSHTTPCookieStorage)

    当你访问一个网站时,NSURLRequest都会帮你主动记录下来你访问的站点设置的Cookie,如果 Cookie 存在的话,会把这些信息放在 NSHTTPCookieStorage 容器中共享,当你 ...

  9. xml in SQL

    几年前,学习html时,顺便把xml也学了哈,知道了xpath和xquery的概念,可都没去落实,下面这篇文章,可以学习学习 http://www.cnblogs.com/huyong/archive ...

  10. Ueditor之前后端源码的学习和简单的研究

    这是我的项目目录 这里写图片描述 1.从访问路径http://localhost:8081/Test/_examples/simpleDemo.html,我们主要是要看看,富文本框被加载出来之前,会调 ...