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

最新推荐文章于 2020-12-10 19:36:58 发布
最新推荐文章于 2020-12-10 19:36:58 发布
阅读量460 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： html+js+jquery+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sd19871122/article/details/75529640
本文介绍了一种使用CSS实现水平导航栏的方法，通过设置display:inline-block属性使ul元素下的li标签横向排列，并去除默认样式。

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

比如一个 ul li 组成的 导航栏

<ul>
<li>Home</li>
<li>Tutorials</li>
<li>Podcast</li>
</ul>



#top_menu li {
/*make sur align li tag from left to right*/
float:left
/*some browsers has the 標識符, that can annul it*/
list-style:none;
padding:5px;
font: bold 14px Tahoma;
}

 





#top_menu li {
/*make sur align li tag from left to right*/
display:inline-block;
/*some browsers has the 標識符, that can annul it*/
list-style:none;
padding:5px;
font: bold 14px Tahoma;
}


display:inline-block ，inline-block会把父类Ul填满，


【CSS基础—No.03】消除display: inline-block产生的间隙
Chailo的博客
11-21 1355
如果你举例子尝试的话会发现一个问题，display: inline-block元素垂直和水平方向也会产生一个间隙，而这个间隙在实际开发中会让我们的页面不那么严谨。
inline-block和float的区别
me_never的博客
09-23 767
inline-block和float的区别 虽然设置浮动跟设置inline-block有些特征类似，但两者的区别还是非常明显的: 1、文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素...
display:inline-block 和float:left 的区别
weixin_30871701的博客
12-08 260
display:inline-block 和float:left 的区别 display是指显示状态，float是针对块级元素的浮动。 使用inline-block：控制元素的垂直对齐跟横向排列元素。 使用浮动：1、让元素环绕某一个元素，对一个元素跟围绕他的一些元素进行更多控制 2、不想处理inline-block带来的空白问题 ...
inline-block和float的区别，什么时候使用
weixin_30552811的博客
02-08 185
文章转载于新浪博客http://blog.sina.com.cn/s/blog_5f39af320101qckt.html 只用于学习交流 什么时候使用inline-block，什么时候使用float 什么时候使用，取决于你的设计稿跟解决方法。如果你需要文字环绕容器，那浮动是不二选择。如果你需要居中对齐元素，inline-block是个好选择。 最终，这可以归结为float跟inline-...
一天搞定CSS： 浮动（float）与inline-block的区别--11
weixin_30296405的博客
05-10 256
浮动： 使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来。 inline-block: inline-block是指行内块元素，它具有行内元素和块元素两者的特点，可以实现对元素的有序排序。 两者的区别 两者主要区别在于当标签的【高度不一致】时，体现出的差异 如果高度不一致的情况下，想让他们按顺序排...
display：inline-block 和float：left块级行内标签和浮动的区别
XYLHxylh的博客
09-06 595
inline-block的意思是左右排列，宽高也有效的，然而，不设置inline-block设置左浮动也可以实现左右排列宽高有效，但他们肯定是有区别的，不同的场景可以用不同的方法。 &lt;div style="width: 100px;height: 130px;background-color: olivedrab;display: inline-block"&gt;&lt...
浮动与inline-block的区别
qq_35370002的博客
12-10 836
display:inline-block 行内块 inline-block 可以将 html 元素设置为行内块元素 行内块元素都拥有以下属性或特点： 1.可设置宽度， 2.可设置高度 3.不自动换行 <div> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> * { margin:
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-block在FF出现空白的解决方案
03-17
4. **使用浮动布局**：虽然`float:left`或`float:right`不是`display:inline-block`，但它可以实现类似的效果，并且不会受到空白的影响： ```css .box { float: left; } ``` 5. **使用Flexbox或Grid布局**：...
inline-block与float浮动的区别
Mr_chen95的博客
09-11 877
在给网页布局的时候有多种方法，采用float,display,position.其中inline-block也可以实现网页布局，这里就说一下float和inline-block布局的差异。 通常情况下小编是喜欢inline-block。而float浮动布局还要清楚浮动，有些麻烦。 一 float浮动布局 .slide{ width: 100px;
css之display:inline-block布局和浮动布局对比
wordpython
02-23 2356
https://www.cnblogs.com/Ry-yuan/p/6848197.html
display:inline-block与float:left的区别
qq_29055201的博客
12-10 1542
display与float是我们常用的布局方式。像display:inline-block;与float:left是我们将元素水平排列的方式。像水平导航栏就可以用这两种方式去实现。那这两种实现方式有什么区别呢？ 1.display: inline-block;会产生留白，需要将父元素的font-size设置为0，消除留白。 // html部分 &lt;ul class="inline"&gt; ...
CSS之使用display:inline-block来布局
热门推荐
weixin_30698527的博客
05-13 1万+
css之display:inline-block布局 1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding上下左右都有效，margi...
inline-block和float的共性和区别
birthmarkqiqi的专栏
01-19 689
在我们平时工作中，经常会遇到把一些块状元素在一行排列显示，这时候我们通常会用到flaot,或许会用inline-block等等，那么他们有什么共性和区别？适用在什么场景？   共性： ①inline-block: 是把一个元素的display设置为块状内联元素，意思就是说，让一个元素的容器inline展示，并且里面的内容block展示；inline属性使元素内联展示，内联元素设置宽度无效，相
关于inline-block和float的区别
qq_36060786的博客
02-11 863
在css样式表中，inline和float都能使元素进行横向排列，但不同的是：1.inline-block：多个元素设置inline-block后无论设置前是行内元素还是块级元素都将变成行内块元素，（注意：是具有块元素性质的行内元素），此时可以设置盒子的width  height  margin  padding……的属性值，但比较特殊的是，如果给多个元素中的某一个元素设置padding和marg...
浮动（float）与inline-block的区别
前端啥也不懂
05-12 2022
结论：两者主要区别在于当标签的【高度不一致】时，体现出的差异如果高度不一致的情况下，想让他们按顺序排列就可以选择inline-block在浮动时，若第一个元素的高度大于第二个元素的高度，第三个元素浮动时，会与第二元素并排在一列中，这样不能出现有序排列了。在inline-block时，就算第一个元素的高度大于第二个元素的高度，第三个元素也不会与第二个元素排在一列。...
使用浮动布局还是inline-block布局？
.
11-03 2635
在上篇博客中对浮动做了介绍 http://blog.youkuaiyun.com/wmaoshu/article/details/52995912 浮动存在的问题也是很明显的，首先他会脱离文档流对父元素兄弟节点和孩子节点都有影响，那么为了实现对浮动布局的替代，那么我的考虑是使用inline-block。浮动和inline-block他们在文档流中排版方式相似，但是inline-block是基线对齐，浮动是
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` 来控制子项间距。如果遇到特殊情况，则可以根据具体项目特点灵活选用其它策略。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值