关于display:inline;和float:left;

最新推荐文章于 2021-05-31 06:41:13 发布
原创 最新推荐文章于 2021-05-31 06:41:13 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#float #xhtml #div #html #function

本文详细介绍了CSS中display属性的使用，包括内联（inline）与浮动（float）的区别及应用场景。通过实例展示了如何使内联元素获得宽度以及浮动对布局的影响。
display是指显示状态，inline表示内联，特点是紧贴着前一个内联元素，通常默认的内联元素有span,a,em,strong等。而float表示的是浮动，float:left，是针对块级元素的浮动形式，是不同形式的两种状态。）
http://www.andymao.com/andy/post/42.html
http://bbs.blueidea.com/thread-2596793-1-1.html

[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]  
 
使用 display:inline-block 会产生什么问题？有什么解决方法？
分享前端工程化、动效魔法与性能之舞！
11-11 726
摘要：inline-block元素间出现空白是由于HTML中的换行符被浏览器解析为空白字符。解决方法包括：1）将标签写在同一行；2）父元素设置font-size:0，子元素重置字体大小；3）为子元素添加float:left属性。这些方案都能有效消除inline-block元素间的间隙问题。
对display:inline;与float:left;的认识
深海狂鲨
05-15 933
首先我们要明确，display:inline;与float:left;正确含义。display:inline;(内联)《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有
认识display:inline;与float:left;
关注前端开发
04-04 273
一.     首先我们要明确，display:inline;与float:left;正确含义。display:inline;(内联)《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复...
float:left和display:inline的区别
danchejikafo的博客
08-27 6149
原文地址：http://www.cnblogs.com/dolphinX/archive/2012/10/13/2722501.html 块级元素与行内元素 首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下
display:inline与float:left的区别
欢迎大家对日志做评论，有转载有自编，难免存在错误，望大家顺手指正，谢谢！^_^
07-08 953
实现效果似乎相同，都是显示在一行。区别在于使用了display:inline，则该元素变为了内联元素，即宽高无效；float则使元素变为块元素，且宽高属性有效。 .d{width:100px; height:50px; background:#009966; float:left;} DIV1 IDV2 效果图：float:left 将float:left改为display
ul float:left
lining213的专栏
10-26 937
<br /><br />ul{<br />list-style-type:none;<br />display:block;<br />text-align:left;}<br />li{<br />background-image:url(icon1.jpg);<br />background-repeat:no-repeat;<br />padding-left:20px;<br />float:left;<br />}<br /> <br />将竖直变成横行
CSS display:inline和float:left两者区别探讨
01-19
本文和大家重点讨论一下CSS display:inline和float:left两者的区别，CSS display是指显示状态，inline表示内联，特点是紧贴着前一个内联元素，通常默认的内联元素有span,a,em,strong等。而float表示的是浮动，float:...
display:inline-block的使用示例
09-25
将`.list`元素的`float:left`属性替换为`display:inline-block`，这样每个`.list`元素会像文本字符一样在一行内尽可能地排列，直到没有足够的空间为止。为了防止元素间的空白间隙（由于元素间的空格或者换行符引起）...
让IE6/IE7支持display:inline-block属性的两种方法
09-25
然而，IE6和IE7这两个较老的浏览器对`display:inline-block`的支持并不完善，这给开发者带来了不小的困扰。为了解决这个问题，本文将详细介绍两种方法，使得这些旧版IE浏览器也能正确地处理`display:inline-block`。...
display:inline和float:left实现行内布局的区别
gswwxyhk的博客
04-24 358
display:inline和float:left实现行内布局的区别 原文地址：https://blog.youkuaiyun.com/danchejikafo/article/details/52334037 float:left是让元素浮动在左边而已，元素的占位属性还是块级属性，height属性还是有效。 display:inline是让元素的占位属性变成内联属性，height无效 设了float:...
前端新手坑之float：left
热门推荐
LiuGeFangQie的博客
03-16 3万+
相信很多刚学前端的同学们，都会遇到这样一个问题：我的背景（图片）怎么突然消失不见了，而且找不到原因。 float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上 例子1代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="...
解析 float : left
a688888888的博客
05-02 6341
本篇主要介绍float属性：定义元素朝哪个方向浮动。 HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行 浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。 而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块...
float:left float:right 与 clear:left clear:right
08-11 485
float:left的元素后跟clear:right，将不会撑开容器，只有设置clear:left或clear:both才行。
float：left的妙用
weixin_30569033的博客
08-15 409
　　在html页面中，我们总是会遇到这样的情况： 当然，这是比较简单的情况，用ul内包li就可以， <ul> <li><img src="logo.jpg">BUSINESS COMPANY</li> <li>HOME PAGE</li> <li>ABOUT US</li> &lt...
css 中 的 float :left 和 clear :both
weixin_34233679的博客
12-28 330
float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。 float：浮动；left：左；就是往左浮动。用来布局，差不多就是底下的一块上来的话，往左靠。 比如A和B同行float:left了,这时候有个C不想float:left 和...
html左侧浮动css,float:left css浮动靠左 布局靠左
weixin_39962356的博客
05-31 3515
css float:left 浮动靠左组织首先float是机关网页浮动(对象靠左left、靠右right)花式属性单词。在机关中我们要让对象靠左浮现只须要对对象配置float:left格式就可。一、float left语法1、float:left使用树模代码div{float:left}配置div结构靠左。2、float:left表达float:left是设置对象靠左(浮动靠左)排版。不管div、...
css float:left 认识误区
xujunhappy
05-17 219
今天改界面，把原来用table的一段代码改成了div，出现了一个问题，解决后发现自己的原来认为的常识并非正确，在此提醒自己，对盒模型后面要深入了解一番。 原先是一个table，有两行，第一行4个元素，第二行2个元素（确认和取消按钮）。 改成div是，一行一个div，第一行放4个div，第二行放两个div； 第一行的4个div都加上了style="float:left" 结果第二行的确认...
float:left的应用
weixin_49884163的博客
08-06 2578
float:left（左浮动） 使指定元素脱离普通的文档流而产生的特别的布局特性。 并且FLOAT必需应用在块级元素之上。 <style type="text/css"> body {font-family: arial, 宋体, serif;font-size:18px;} ul{padding:0;margin: 0;} #nav {line-height: 30px;list-style-type: none;background: #AEAEAE;} #nav li {fl
float left 或者float right 详解
luochengor的专栏
07-28 2874
CSS中很多时候会用到浮动来布局，也就是经常见到的float:left或者float:right，简单点来说，前者是左浮动(往左侧向前边的非浮动元素飘，全是飘得元素的话，就按照流式来浮动从左到右，放不下则换行)，后者是右浮（往右飘）动。但仅仅是如此吗？ No!要注意以下几点：1、
display: inline-block 和其他元素有缝隙
最新发布
01-04
### 解析 Inline-Block 元素间的间距 HTML 和 CSS 中，`inline-block` 显示模式允许元素像行内元素一样排列，同时保持块级元素的特性。然而，在实际应用中，这些元素之间会出现不必要的空白间隙。 #### 原因分析 当 HTML 文档中有换行符或空格存在于相邻 `inline-block` 元素之间时，浏览器会将其视为单个字符宽度的空间[^3]。这种现象源于早期 Web 设计对于英文文本排版的需求，其中单词间通常需要空格分隔。 #### 方案一：调整父容器字体大小 通过设置父容器的 `font-size` 属性为零可以有效消除子元素间的额外空间： ```css .parent { font-size: 0; } .child { display: inline-block; font-size: 16px; /* 恢复正常文字尺寸 */ } ``` 这种方法简单易行，适用于大多数场景下的布局需求[^2]。 #### 方案二：移除源码中的空白节点 另一种解决方案是在编写 HTML 结构时不留下任何多余的空白字符，即让多个 `inline-block` 元素紧密相连，不留空隙。这可以通过删除标签之间的换行和缩进来实现: ```html <div class="no-space"> <a href="#">链接</a><a href="#">链接</a><a href="#">链接</a> </div> ``` 尽管此法能解决问题，但在维护性和可读性方面有所欠缺[^5]。 #### 方案三：浮动定位 (Float) 给定 `inline-block` 元素添加 `float:left` 样式也可以规避上述问题的发生。不过需要注意的是，采用这种方式可能会引发其他潜在的设计挑战，比如清除浮动等问题[^4]: ```css .item { float: left; display: inline-block; } ``` #### 推荐实践 综合考虑开发效率与用户体验，推荐优先尝试 **方案一** —— 修改父级容器的 `font-size` 来控制子项间距。如果遇到特殊情况，则可以根据具体项目特点灵活选用其它策略。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值