`
txf2004
  • 浏览: 6872335 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

display:inline与float:left的正确解释

阅读更多
<!-- google_ad_client = "pub-4490194096475053"; /* 内容页,300x250,第一屏 */ google_ad_slot = "3685991503"; google_ad_width = 300; google_ad_height = 250; // -->

首先我们要明确,display:inline;与float:left;正确含义。display:inline;(内联)《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

  当然这看起来不像是display:inline;与float:left;的区别所在,但是当理解了float:left;的特性那么我们就清楚到底是怎么回事了。float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上,也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。

  那么我们很清楚了,内联(display:inline;)元素不能设置宽高,因为内联属于行布局,其特性是在一行里进行布局,所以不能被设定宽高

分享到:
评论

相关推荐

    CSS display:inline和float:left两者区别探讨

    本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有span,a,em,strong等。而float表示的是浮动,float:...

    float元素浮动后高度不一致导致错位的解决办方法

    浮动子元素定义需要的font-size, 再定义display:inline-block;vertical-align:top; 复制代码代码如下: ul{ margin:0; padding:0; list-style-type:none; font-size:0; } ul li{ width:160px; display:inline-...

    js抓人游戏

    img{display:inline;float:left;position:absolute;} #chat{display:inline;float:left;position:absolute;font-weight:bold;font-size:16px;} h1{float:left} span{float:left;font-size:32px;font-weight:bold;...

    关于label和span设置width无效问题解决方法

    在默认情况下label、span 设置width 是无效的。一般要display属性 复制代码代码如下: display:... float:left; 但是一定要在后面的div里面加上 复制代码代码如下: clear:both; 不然会影响到后面的div板式会乱。

    div-css-漂亮的导航条

    float:left; width:100%; background:#F4F7FB; font-size:93%; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #...

    div CSS技巧

    div使用css的总结,很不错的吆 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px;...float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}

    【JavaScript源代码】JavaScript实现4位随机验证码的生成.docx

    JavaScript实现4位随机验证码的生成  本文实例为大家分享了JavaScript生成4位随机验证码的具体代码,供大家... float:left; font-size: 20px; line-height:2em; } #tex{ display:inline-block; width:50px; he

    css(display,float,position)深入理解

    left:设置对象浮在左边 right:设置对象浮在右边 浮动的目的: 就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利用float属性 1.任何申明为 float 的元素自动被设

    css浏览器兼容性前端人员的必备

    对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. ...float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ }

    display:inline-block的使用示例

    或许许多人认为直接设置float:left;不就行了 但是这个有一个问题,你必须把外面的div的宽度设置的很长已满足大于所有子div的宽度,而实际中由于子页面中个数不定,因此外面的div块的宽度不能确定,若是外面的div块...

    float:left的对象(导航)如何居中示例探讨

    [display:inline-block]也有同样的特性,并且可以居中,但连续几个这样的东东,之间却会出现空格。 为了解决这个问题,我们可以把二者结合起来使用: [参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / ...

    js+csss实现的一个带复选框的下拉框

    效果图: css: &lt;style type="text/css"&gt; /* 带复选框的下拉框 */ ul li{ list-style: none;...display:inline-block;...float:left; display:inline-block; border:0px solid black; position: relative; } .ch

    Java相关课程系列笔记之十JSP学习笔记

    margin-left:200px; margin-top:40px; width:548px; height:177px; overflow:hidden; position:relative; } #adv,#num{ pos ition:absolute; } ul li{ list-style:none; display:inline; } ul img{ width:548px; ...

    有序列表ol漂亮css分页样式代码(纯css)

    有序列表ol漂亮分页样式 a { color:#000;...display:inline; float:left; margin:0; padding:0; font-size:12px; } .pagination i{ float:none; padding-right:1px; } .currentPage b{ float:none; colo

    HTML 网页设计

    .grid:first-child { margin-left: 0; } .images_3_of_1 { width:100%; position:relative; margin-bottom:10px; } .blog-leftgrids{ padding-top:10px; } .blog-desc{ width:100%; } .images_3_of_1 img { ...

    悬浮广告方法日常收集整理

    .fl{float:left;display: inline;} .fr{float: right;display: inline;} .clearfix{*zoom: 1;} .clearfix:after{ display: block; content: ; height: 0;line-height: 0;visibility: hidden; clear: both;} /*tab ...

    div+css实现两列table效果示例

    padding-left:50px; float:left; display:inline}.mycode ul{ width:500px; height:300px } .mycode li{ width:200px; float:left; height:30px; list-style:none} .mycode li p{text-align:right; margin-top:0px}...

    静态网业模板1

    left:7px; width:auto; height:20px; background-color:#990000; text-align:center; padding:0 7px 0 7px; color:#FFFFFF; font-size:11px; line-height:20px; } /*--------------cart_table-------------*/ .cart_...

    direction.less:Less.js RTLLTR规则

    无方向 Less.js RTL / LTR mixins规则。 下载 -版本0.1.0 -大师分支 例子 更少的代码: @direction: rtl; // use `rtl` or `ltr` @import "direction.less";... padding-left: 1em; } 轻铁 body {

Global site tag (gtag.js) - Google Analytics