display:inline;与float:left; 区别

最新推荐文章于 2019-05-21 09:07:25 发布

转载最新推荐文章于 2019-05-21 09:07:25 发布 · 82 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chris-oil/archive/2010/07/23/1783683.html

本文探讨了HTML中span元素作为内联元素时设置宽度的效果，并通过添加浮动属性解决了宽度不生效的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

span为内联/inline元素，给他宽度赋值是没有效果的。 span为内联/inline元素，给他宽度赋值100px+float:right;可以看到有了宽度。

这个li被定义为内联/inline,设置宽度没有效果

test
test

这个li被定义为内联/inline+float:left,设置宽度有效果

test
test

转载于:https://www.cnblogs.com/chris-oil/archive/2010/07/23/1783683.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34026484

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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`元素会像文本字符一样在一行内尽可能地排列，直到没有足够的空间为止。为了防止元素间的空白间隙（由于元素间的空格或者换行符引起）...

参与评论您还未登录，请先登录后发表或查看评论

认识display:inline;与float:left;

关注前端开发

04-04

262

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

display:inline-block与float:left的区别

qq_29055201的博客

12-10

1544

display与float是我们常用的布局方式。像display:inline-block;与float:left是我们将元素水平排列的方式。像水平导航栏就可以用这两种方式去实现。那这两种实现方式有什么区别呢？ 1.display: inline-block;会产生留白，需要将父元素的font-size设置为0，消除留白。 // html部分 <ul class="inline"> ...

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

anjichan4261的博客

06-30

146

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

display: inline-block与float:left

huyao的博客

09-25

674

转载自：http://blog.sina.com.cn/s/blog_5f39af320101qckt.html 什么时候使用inline-block，什么时候使用float 什么时候使用，取决于你的设计稿跟解决方法。如果你需要文字环绕容器，那浮动是不二选择。如果你需要居中对齐元素，inline-block是个好选择。最终，这可以归结为float跟inline-block的两种属性作...

display:inline-block 和float:left 的区别

swebin的专栏

05-21

703

display是指显示状态，float是针对块级元素的浮动。使用inline-block：控制元素的垂直对齐跟横向排列元素。使用浮动：1、让元素环绕某一个元素，对一个元素跟围绕他的一些元素进行更多控制 2、不想处理inline-block带来的空白问题元素浮动后，它会变为 inline-block。其宽度不是10...

display:inline与float:left的区别

欢迎大家对日志做评论，有转载有自编，难免存在错误，望大家顺手指正，谢谢！^_^

07-08

943

实现效果似乎相同，都是显示在一行。区别在于使用了display:inline，则该元素变为了内联元素，即宽高无效；float则使元素变为块元素，且宽高属性有效。 .d{width:100px; height:50px; background:#009966; float:left;} DIV1 IDV2 效果图：float:left 将float:left改为display

float:left和display:inline的区别

danchejikafo的博客

08-27

6093

原文地址：http://www.cnblogs.com/dolphinX/archive/2012/10/13/2722501.html 块级元素与行内元素首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下

关于float:left及display:inline(display:inline-block)的不同及应用场景

没有名字适合我的博客

12-21

1422

问题 CSS中用float:left和display:inline(display:inline-block)设置元素水平排列有什么不同？答案 float:left会使元素脱离文档流（通俗讲就是元素不占据原来的空间，后面的元素会当做它不存在一样占据他的位置。类似于绝对定位的效果）因此所有子元素设置浮动float后父级元素会被闭合（也就是父元素里没有内容不占据空间，宽高置为0，不过可以通过清除浮...

float和display:inline-block

q_A_p的博客

11-21

638

float和display:inline-block 都能使两个块形元素并排下面是div部分代码使用float时结果是 *{ padding: 0; margin: 0; } .left{ width: 50%; height: 100px; float: left;

display:inline和float:left实现行内布局的区别

gswwxyhk的博客

04-24

346

display:inline和float:left实现行内布局的区别原文地址：https://blog.youkuaiyun.com/danchejikafo/article/details/52334037 float:left是让元素浮动在左边而已，元素的占位属性还是块级属性，height属性还是有效。 display:inline是让元素的占位属性变成内联属性，height无效设了float:...

让IE6/IE7支持display:inline-block属性的两种方法

09-25

在Web开发中，`display:inline-block`是一种非常实用的CSS属性，它允许元素拥有块级元素的特性（如自定义宽度、高度），同时保持内联元素的排列方式，即允许元素在同一行显示。然而，IE6和IE7这两个较老的浏览器对`...

mmexport1755325166750.mp4

08-16

mmexport1755325166750.mp4

08-16

08-16

1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

### 生物质炉具现场测试污染物排放特征及减排效果评估

08-16

内容概要：该研究通过在黑龙江省某示范村进行24小时实地测试，比较了燃煤炉具与自动/手动进料生物质炉具的污染物排放特征。结果显示，生物质炉具相比燃煤炉具显著降低了PM2.5、CO和SO2的排放（自动进料分别降低41.2%、54.3%、40.0%；手动进料降低35.3%、22.1%、20.0%），但NOx排放未降低甚至有所增加。研究还发现，经济性和便利性是影响生物质炉具推广的重要因素。该研究不仅提供了实际排放数据支持，还通过Python代码详细复现了排放特征比较、减排效果计算和结果可视化，进一步探讨了燃料性质、动态排放特征、碳平衡计算以及政策建议。适合人群：从事环境科学研究的学者、政府环保部门工作人员、能源政策制定者、关注农村能源转型的社会人士。使用场景及目标：①评估生物质炉具在农村地区的推广潜力；②为政策制定者提供科学依据，优化补贴政策；③帮助研究人员深入了解生物质炉具的排放特征和技术改进方向；④为企业研发更高效的生物质炉具提供参考。其他说明：该研究通过大量数据分析和模拟，揭示了生物质炉具在实际应用中的优点和挑战，特别是NOx排放增加的问题。研究还提出了多项具体的技术改进方向和政策建议，如优化进料方式、提高热效率、建设本地颗粒厂等，为生物质炉具的广泛推广提供了可行路径。此外，研究还开发了一个智能政策建议生成系统，可以根据不同地区的特征定制化生成政策建议，为农村能源转型提供了有力支持。

汽车嵌入式开发资料：NXP Cloud Lab 恩智浦云实验室

08-16

汽车嵌入式开发资料：NXP Cloud Lab 恩智浦云实验室

A153基于springboot+vue的公交智能化系统（LW文档+完整前后端代码+sql脚本+开发文档+全套软件）

08-16

项目介绍公交智能化系统可以将功能划分为用户和管理员功能用户关键功能包含用户注册登陆、科目任务、公交线路、公交站点、公交信息、周边服务、公交动态、天气、我的等有关功能. 管理员的权限是最高的，可以对系统所在功能进行査看，修改和删除。管理员进入系统主页面，主要功能包括对系统首页、用户管理、线路管理、车次管理、公交线路管理、公交站点管理、公交信息管理、周边服务管理、公交动态管理、系统管理、我的信息等进行操作。项目已获导师指导并通过的高分毕业设计项目，可作为课程设计和期末大作业，下载即用无需修改，项目完整确保可以运行。包含：项目源码、数据库脚本、软件工具等，该项目可以作为毕设、课程设计使用，前后端代码都在里面。该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。项目都经过严格调试，确保可以运行！可以放心下载视频演示地址：链接: https://pan.baidu.com/s/1gsV1hPJzQtIWjGjpXsce8A?pwd=9nyn 提取码: 9nyn

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` 来控制子项间距。如果遇到特殊情况，则可以根据具体项目特点灵活选用其它策略。