display:inline-block解决行元素没有办法设置宽高的问题

最新推荐文章于 2022-11-24 17:21:21 发布
原创 最新推荐文章于 2022-11-24 17:21:21 发布 · 3.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了HTML与CSS布局中的两个关键特性：display:inline-block与float:left。通过对比这两种布局方式，文章揭示了它们在实现页面元素布局时的不同效果与应用场景。特别强调了display:inline-block特性如何使元素既能保持内联对象的外观，又具备设置宽度和高度的能力，同时还能保持元素周围的内联对象在同一行。同时，float:left则允许行元素调整宽度并保持居中显示的效果。文章旨在帮助开发者更好地掌握这些布局技巧，提高网页设计的灵活性与美观度。

1,   display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 (准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)


2,  float:left可以让行元素能够设置宽高,但是不能让行元素居中显示



display:inline-block的使用示例
09-25
将`.list`元素的`float:left`属性替换为`display:inline-block`，这样每个`.list`元素会像文本字符一样在一行内尽可能地排列，直到没有足够的空间为止。为了防止元素间的空白间隙（由于元素间的空格或者换行符引起）...
display:inline-block的原理分析
09-25
这个属性结合了 `display:inline` 和 `display:block` 的特性，使得元素既能像内联元素一样在一行内排列，又能像块级元素一样拥有宽度、高度以及垂直方向的 margin 和 padding。这对于创建复杂的网页布局和响应式...
如何给行内元素设置宽高
韩旭不会敲代码吧的博客
07-27 4518
我们都知道行内元素直接设置宽高是无效的。当我们在面试中遇到这个问题的时候，很容易想到给它设置 display:block或者display:inline-block就可以了，但是面试官来了句“还有其他方法吗？” 1、常用的行内元素 <a> 标签可定义锚 <abbr> 表示一个缩写形式 <acronym>定义只取首字母缩写 <b> 字体加粗 <bdo> 可覆盖默认的文本方向 <big> 大号字体加粗 <br>
span设置宽度有效无效问题
热门推荐
请叫我
11-22 4万+
缺省情况下span的宽度设定无效 在html中如何设定span的宽度？这看上去是个很简单的问题，似乎用style中的width属性就可以。例如， YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns="
div宽度设置无效问题解决
weixin_46312949的博客
09-01 3883
div宽度设置无效问题解决
DIV 设置 display：inline-block 导致 DIV 对不齐的解决方法
ForeverCjl的专栏
11-21 1万+
情景代码如上。 出问题的浏览器： 360，sogou，猎豹的极速模式 给DIV设置display：inline-block属性后，这四个DIV会拍在一排，但是会个别的高一点，不对齐。 解决方法： 给div设置vertical-align：top vertical-align：top"> vertical-align：top"> vertical-align：top"> ver
关于inline-block元素的行高问题
evilemon的博客
07-03 2848
以chrome浏览器作为调试工具，打开如下页面： 网页 div{ width: 150px; background: #456789; margin: 200px; } span{ display: inline-block; } .span1{ width: 115px; height: 115px; background: #000fff; text-
CSS属性display:inline-block用法深入理解
09-25
同时，`inline-block`元素的内容会按照块级元素的方式处理，允许设置宽高、内外边距等。这种特性在创建响应式设计、布局网格或者实现诸如按钮、导航菜单等组件时非常有用。 然而，并非所有浏览器都原生支持`display...
深入解析CSS的display:inline-block属性的使用
12-02
首先，`display:inline-block` 和 `display:table-cell` 在某些方面确实相似，比如它们都能保持内部元素的宽度和高度，但关键区别在于`inline-block`没有父元素的匿名包裹特性。这意味着`inline-block`元素可以灵活...
使用inline-block后，高度出现Bug
余百炼的博客
12-03 1259
在做一个小demo时候，出现虽然已经设置了height为44px；但是在浏览器上高度明显不对，经过查阅知道是inline-block元素存在的bug导致。这篇文章对于这个问题给出了很多解决办法：https://segmentfault.com/a/1190000010934928 我的bug: 解决办法：  ...
css before,after伪元素width,height属性不生效解决
路过君的博客
10-25 6893
原因 before、after伪元素存在默认样式 { display: inline; } 解决 修改样式如下即可生效 xxx::before { display: inline-block; width: 16px; height: 16px; }
display: inline-block的总结
游坦之的博客
08-21 2349
我尝试了很多种办法，设置高度，浮动，定位什么的都没有用，后来看了一下网易云音乐的源代码，发现他用到了这个display:inline-block;同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。由效果图可以看出，display：block 虽然支持宽高、内边距、外边距的设置，但是每一个block后面，都会默认自动添加一个换行符。由效果图可以看出，inline不支持设置宽高、内边距，外边距，即使设置了也不会产生应有的效果。
块元素设置inline属性不能设置宽高的解决办法
仗键天下 策码一生
05-22 5654
版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://www.blogbus.com/catller-logs/30679536.html inline为display属性：设置是否及如何显示元素 ---> 此元素会被显示为内联元素，元素前后没有换行符。 在，可以使其在一行中显示。但当这个时候我无法给li限制高度和宽度。给布局上带来很大的不便。 Li，
display:inline inline-block block
zzzley的博客
11-24 1066
display：block，inline，inline-block
Css中display:inline-block用法详解
双眸
11-30 4948
display:block就是将元素显示为块级元素 block元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度 &lt;div&gt;, &lt;p&gt;, &lt;h1&gt;, &lt;form&gt;, &lt;ul&gt; 和 &lt;li&gt;是块元素的例子。 display:inline就是将元素显示为行内元素...
CSS问题之两个dom标签设置 display: inline-block; 宽度正好，还是错位
yan263364的博客
05-09 840
问题 红框中是两个平级的兄弟节点： 设置css属性为： dom 渲染效果：错位 解决 修改css 最后，昨天小程序是这个问题导致错位；今天PC Vue项目也是这个问题，还是在博客里记录下吧。 ...
关于display:inline,block,inline-block作为子级元素设置宽高时的细小区别
Overthebar的博客
12-03 763
&lt;div class="box"&gt; &lt;div class="child"&gt;&lt;/div&gt; &lt;/div&gt; 首先定义一个 父级的div和子级的div 首先我们知道的是 div是块级元素，会自动独占一行，而子级的div更会继承父级div的宽度 css代码 .box{ width: 100px; margin:0 auto; } .child{ he...
html定义最小宽度,line-block的运用：最小宽度的设置
weixin_33286939的博客
05-30 463
line-block：本身是内联盒模型的存在，又具备块状盒模型的特性。很好很强大的东西啊～网上找到的正规描述：这个值导致一个元素产生一个块状盒模型(block box)，而本身作为单一的内联盒模型(inline box)流动排列(flow)，类似一个被替代的元素。Display值为inline-block的元素内部形成一个块状盒模型，而本身形成类似一个内联的被替代元素PS：可惜IE不支持，FF也不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值