关于inline-block的使用

最新推荐文章于 2021-01-14 13:42:28 发布
最新推荐文章于 2021-01-14 13:42:28 发布
阅读量462 收藏
点赞数
分类专栏： 解决问题 经验总结 网站
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhongzai2010/article/details/53230691
版权
解决问题 同时被 3 个专栏收录
37 篇文章 0 订阅
订阅专栏
网站
17 篇文章 0 订阅
订阅专栏
经验总结
16 篇文章 0 订阅
订阅专栏

在手机端移动网页开发中我不喜欢使用浮动布局，所以使用一些其他的，比如inline-block;

问题：在inline-block使用过程中发现，长度有时候总是不受控制，比如70%+30%！=100%而自动换行的问题。

解决：发现两个inline-block之间如果有留白，则就会出现上面的问题，

解决办法一：标签之间定格写，取消空白，问题能解决，但是编码缩进不好，不好看；

解决办法二：在上层盒子中设置font-size:0；

解决办法三：letter-spacing负值；


具体参考了网文：

http://www.zhangxinxu.com/wordpress/2010/11/拜拜了浮动布局-基于displayinline-block的列表布局/


补充： vertical-align属性对于inline-block元素是有作用的！  理解为对行内元素有效（inline， inline-block）

物联网技术肥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS display:inline-block的应用
weixin_30270889的博客
11-01 2278
本文详细描述了display:inline-block的基础知识，产生的问题和解决方法以及其常见的应用场景，加深了对inline-block应用的进一步理解。 基础知识 display:inline-block是什么呢？相信大家对这个属性并不陌生，根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的...
display:inline-block之用法
weixin_30642561的博客
07-31 201
HTML的元素有多种display属性，比较常见的有display:none; display:block; display:inline和display:inline-block;等。详细可参阅W3Schools文档。有些HTML元素自然地带有display:block;样式属性，比如<div><h1>...<h6><p>...
inline-block 的使用
学习记录
06-03 258
做横向布局、排序，在过去很长的一段时间内都是使用 float ，但是使用 inline-block 会更简单。 因为IE6和IE7不支持inline-block，以前想使用inline-block，可是考虑到要做麻烦的兼容，就放弃了。 假如做移动设备的web，不考虑IE6和IE7，使用inline-block还是很方便的。 inline-block *{margin: 0; pad
CSS：inline-block的使用方法
ma125120的博客
07-23 1484
CSS：inline-block的使用方法 inline-block类型是在CSS2.1中追加的一个盒类型。目前为止，它受到了Safari浏览器、Opera浏览器、Chrome浏览器、Firefox浏览器以及IE8以上版本浏览器的支持。 inline-block属性的三种用法 块级元素的并排显示：在进行网站开发的过程中，经常使用float或position使得元素在一行内进行并排显示，这两种属性
display:inline-block 使用说明
我仅仅是一个Coder
11-20 1124
一，内联元素下，使用inline-block，ie各版本都支持。（已测试） 二，块级元素下，使用inline-block，ie8 及其以上支持。 需要支持ie6及其以上 解决方案：zoom:1;display:inline-block;*display:inline;（已测试ie6，7） 注意顺序，有些blog说display:inline-block;与*display:inli
Firefox Bug: inline/inline-block的间隙采用代码缩进可解决
09-25
此外，随着CSS Flexbox和Grid布局的普及，`inline-block`在某些场景下的使用频率逐渐下降，这些新的布局方式提供了更强大且兼容性更好的解决方案，可以更好地控制元素的排列和间距，从而避免了类似`inline-block`的...
display:inline-block的使用示例
09-25
在给定的示例中，我们看到如何使用`display:inline-block`来解决浮动元素导致的换行问题。 在传统的多列布局中，我们通常使用`float:left`来实现元素并排显示。然而，这种方法存在一个问题，即如果父容器的宽度小于...
关于css display: inline block inline-block的区别分析
01-21
display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。...这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症，比如使用这一属性后，
CSS属性display:inline-block用法深入理解
09-25
1. 使用双`display`属性技巧：先设置`display:inline-block`触发layout，然后立即设置`display:inline`。代码示例如下： ```css div { display: inline-block; /* ...其他样式 */ } div { display: inline; ...
inline-block元素的4px空白间距解决方案
01-19
有关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的...
28.inline-block使用，缝隙，对齐
qq_36367494的博客
02-18 1197
1.display:inline-block简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。  2.为什么产生水平空隙：inline 元素会产生空隙，block 元素不会产生空隙。看看 inline 元...
inline-block什么意思中文_css中inline-block是什么？inline-block布局的使用
weixin_35674742的博客
01-14 6307
css中inline-block是什么？本篇文章就给大家介绍在css中inline-block是什么意思，让大家了解在css布局中使用inline-block的好处。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。首先我们来了解一下inline-block是什么？inline-block表示的是行内块状元素，比如：img、input在默认情况下即为行内块状元素，即：默认情况下，di...
使用inline-block后，高度出现Bug
余百炼的博客
12-03 1170
在做一个小demo时候，出现虽然已经设置了height为44px；但是在浏览器上高度明显不对，经过查阅知道是inline-block元素存在的bug导致。这篇文章对于这个问题给出了很多解决办法：https://segmentfault.com/a/1190000010934928 我的bug: 解决办法：  ...
inline-block布局
qq_33582240的博客
02-18 248
使用inline-block布局相比float的浮动布局，不必担心每个列表高度不一的问题，所以每个列表的内容可以完整显示，这可比直接裁掉要好些。 基于display:inline-block的列表布局的优点可以让列表元素不等高。
CSS之使用display:inline-block来布局
糖长老莫小贝的博客
09-21 530
本文转载于https://www.cnblogs.com/Ry-yuan/p/6848197.html 感谢博主分享 1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是t.
横向布局中浮动float和inline-block的使用
ime33的博客
01-06 1804
版权声明：本文为博主原创文章，未经博主允许不得转载。 如果考虑不周之处还请同行朋友指点~~~ 在前端开发过程中CSS横向布局几乎在每个项目中都会所有涉及，这种布局主要有浮动float和inline-block两种实现方式！ 首先说说float：浮动属性（left，right，none，inherit） float定义元素影响： 1、脱离文档流进行布局； 2、自动给浮动
什么时候使用inline-block？
Blog
09-10 1028
看起来inline-block的显示效果和inline是一样的？？？ 给元素设定宽度和高度时，只能使用块级元素block。 如果是内联元素inline是不能设置高度和宽度的。 但此时，我想个给某个元素设定宽度和高度，同时又让它显示的效果和inline一样（包紧元素）该怎么办呢？？？display：inline-block；//就这样设置
ARM环境搭建 — CodeWarrior 的安装
我的专栏
09-07 5528
CodeWarrior 的最新版可以在Freescale的官方网站下载到http://www.freescale.com/ Special Editions为免费版，有30K代码限制等一系列限制，但不会影响使用。 　　安装哪个版本都可以，安装后只要替换license.dat 文件就可以。有的人在Windows7下安装后运行会产生问题，可以先安装Visual Studio，再安装CodeWar
inline-block布局挑战与解决策略
"这篇文章主要介绍了跨浏览器的inline-block声明及其应用中的挑战，通过实例分析了如何使用inline-block实现布局，并解决不同浏览器之间的兼容性问题。" 在Web开发中，CSS的`display: inline-block`是一个既强大又...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值