由overflow-x:scroll产生的收获

我们都知道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>

效果

时间: 2024-10-10 13:44:28

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

解决ul下的li换行问题,(父元素div加overflow:scroll没作用的问题)

#left, #right { width: 50%; box-sizing: border-box; min-height: 100%; float: left; overflow: scroll;//必须写} #left ul{ float: left;//必须写 display:flex;//必须写 }#left ul > li { display:inline-block;//必须写 list-style: none; box-sizing: border-box; float: lef

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

标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 可能的值 描述 left 元素向左浮动. right 元素向右浮动 none 默认值,元素不浮动,并会显示在其在文本中出现的位置 inherit 规定应该从父元素继承float属性的值   特点:浮动找浮动,不浮动找不浮动 浮动只影响后面的元素 浮动以元素顶部为基准对齐 浮动可是实现模式转换(span设置浮动可以设置宽高 ) 让块级元素在一行

关于css清除元素浮动的方法总结(overflow clear floatfix)

作者:文刀日月: 来源:http://www.cnblogs.com/dtdxrk/p/3555438.html 关于css清除元素浮动的方法总结(overflow clear floatfix) 在前两天的一个面试中考官问我web中清除浮动的一些css常用方法,我很轻松的答出了: 1.overflow:hidden 2.clear:both 3.floatfix类 然后问题就来了,考官接着问'为什么overflow:hidden'可以清除浮动?这下就把我问住了.写了这么多年css只是单纯的解决

溢出overflow: hidden

如果要防止内容把div容器或者表格撑大,可以在CSS中设置一.overflow: hidden; 表示如果内容超出容器大小,就把超出部分隐藏(相当于切掉)二.overflow: scroll; 这个表示给内容加上控制滑块,可以在容器内部拖动它查看,而不把容器撑大(相当于窗体上的控制滑块) 当一个元素固定为某个特定大小,但内容在元素中放不下.此时就可以利用overflow属性来控制这种情况 定义 overflow溢出 值: visible | hidden | scroll | auto | in

HTML5——css基础语法

1.了解CSS CSS是一种用来表现HTML等文件样式的计算机语言,是对HTMl文件中设置的各种标签添加各种各样的样式与表达方式,让网页更生动,更美观. 2.导入CSS的三种方式 1.行内样式表:直接在<body>主体的HTML标签中,使用style""的方式引用: 比如设置一个div的大小: <div style="height:100px width:100px"></div> 优点:使用灵活,优先级权重最高 缺点:不符合w3

关于 IE6、 IE7兼容性总结(转)

其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决. 下面是14条特殊情况仅供参考: 1. 文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera下就更不一样了.解决方案:给文字设定 line-height .确保所有文字都有默认的 line-height 值.这点很重要,在高

自定义滚动条样式 --- 适用于webkit浏览器 Google Chrome 和 Opera

适用于Google Chrome 和 Opera浏览器的滚动条自定义样式 ::-webkit-scrollbar //滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等.(位置1) ::-webkit-scrollbar-button //滚动条两端的按钮.可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果.(位置2) ::-webkit-scrollbar-track  // 外层轨道.可以用displ

H5——浮动及清浮动

一.float浮动:float:left/right/none/inherit;(inherit从父级继承浮动,对有的浏览器不兼容,一般不用) 1.块在一排显示 2.内联元素支持宽高 3.默认内容撑开宽度 4.脱离文档流(文档流是文档中可显示对象,在排列时所占用的位置) 特性: 1.浮动元素不会覆盖住任何文字或者行内标签,所有的文字或者行内标签会环绕在浮动元素周围 2.浮动元素会覆盖块标签的背景和边框 3.一个元素设置浮动属性之后,该元素会朝着设置的方向移动,直到碰到父级或浏览器的边缘,或者前一

Web前端学习第十一天&#183;fighting_使用CSS布局和定位

元素布局 display  设置对象是否及如何显示.IE7以下的浏览器不支持table相关的参数值. 红色颜色显示的属性值为常用的值. 语法:display:none(隐藏对象,与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间) | inline(指定元素为内联元素) | block(指定元素为块级元素) | list-item | inline-block(指定元素为内联块级元素) | table | inline-table | table-caption |