CSS盒子布局-设置inline-block不能在排一行
发布网友
发布时间:2022-09-24 14:13
我来回答
共1个回答
热心网友
时间:2023-09-13 12:09
昨天在公司进行一个盒子布局的时候,想让多个div处于同一条水平线上的时候,发现点小问题:
情形:设置父Div为固定宽高,父Div中嵌套两个子Div,分别继承父Div宽度的20%和80%,按道理设置 display:inline-block 会处于同一水平线上;
在这里发现点小问题就是设置display之后,两个子div它 不会排在同一条水平线上,会把第二个盒子挤下来 ;
其实是很郁闷的,不知道这里是为什么反正就是不能在同一条水平线上,然后百度什么的,说是不同盒子之间的存在margin和padding,但是我看盒子的margin和padding也没有啊,如下:
在初始化所有标签的margin和padding的同时设置 font-size: 0 ;
各位大大知道为什么这样可以操作的可以私信,也可戳我邮箱 zhouminghang@baosight.com
使用浮动的话就不会存在上面的问题,直接就在同一水平线上了;
需要注意的是:浮动之后块级元素的display属性已经发生了改变;
这是我自己总结的几种关于 清除浮动 的方法,仅供参考---> 清除浮动的方法请戳这里
定位的方法很简单,就不说了,基本上就是设置 父元素 为相对定位 postition: relative; , 然后设置 子元素 为 绝对定位 position: absolute; 再然后就是设置 top和left 的位置值了;
这里不建议使用定位的方法,定位使用多了, 整个页面结构看起来会很乱的
CSS之使用display:inline-block来布局
不同之处:设置display:inline-block的元素不会脱离文本流,而浮动元素则会脱离文本流,并可能引起父元素高度坍塌。相同之处:在一定程度上,两者都能实现相似效果。我们来看看这两种布局的效果:使用display:inline-block的图一,与浮动布局后的图二。乍看之下,两者几乎相同,但inline-block布局存在间隙...
inlineblock是什么意思
1. 内联特性:inline-block元素会像内联元素一样排列,即它们可以并排显示,不会独占一行。这对于创建水平布局的列表或者菜单非常有用。2. 块级元素的特性:与纯粹的inline元素不同,inline-block允许设置宽度、高度、边距和填充等属性,这使得它可以在布局中更加灵活多变。这些属性可以帮助你控制元素间的...
css中display:inline-block
1. 同行显示:与纯inline元素一样,多个`inline-block`元素会排列在一行内,直到容器宽度不足以容纳下一个元素,下一个元素才会换行。2. 可以设置宽高:与block元素相似,`inline-block`元素可以设定明确的宽度和高度。3. 内外边距有效:像普通block元素一样,可以为`inline-block`元素设置内外边距。三...
display:inline-block一些注意点
在使用display:inline-block时,将原本的block元素转化为具备inline性质的元素,但同时保留了block元素设置宽高的能力。这使得原本无法在一行中调整大小的block元素,现在能够灵活展示其内容。对于原本为inline的元素,应用display:inline-block后,同样能调整其宽度和高度,同时保持内联的布局特性。这样,原本只能...
inline block是什么意思
通常情况下,块级元素会独占一行,而内联元素则不会产生换行。然而,使用inline-block,我们能够在一行内排列多个元素,同时赋予它们所需的尺寸,这在需要元素既有内联的排列又能设置尺寸时非常实用。例如,将链接元素(a元素)设置为inline-block,就可在保持文本链接的同行性的同时,赋予其宽度和高度。这...
怎样使span始终是一行???
将属性设置为display:inline或display:inline-block即可。display 属性规定元素应该生成的框的类型。说明:这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构...
【CSS】加深理解inline、block、inline-block并实现各种细节效果_百度...
首先,了解这三者的区别:inline元素默认在行内水平布局,block元素独占一行,inline-block则是行内元素但可以设置宽度。字体大小控制和行高(line-height)的配合是容易忽视的要点,务必确保两者设置,避免影响布局一致性。通过实例,我们将看到如何利用font-size:0和line-height调整元素间距,以及如何让line-...
CSS里的display:inline-block会有间隙,怎么解决?
使用inline-block出现的间隙的解决方法:父加上样式 font-size:0; 是为的是去掉多余的空白 子元素加上应有的字体样式 1 2 使用font-size
html 中给div 设置display:inline-block; 之后不能给 div设置width 和...
inline 或 block,layout 不会消失)。代码如下(…为省略的其他属性内容):div {display:inline-block;...}div {display:inline;}2、直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(如:zoom:1 等)。代码如下:div {display:inline; zoom:1;...} ...
请问css中的区块 inline inline-block block 三者有什么区别呢?_百度...
内联元素是不可以控制宽和高、margin等;并且在同一行显示,不换行。块级元素时可以控制宽和高、margin等,并且会换行。inline:使用此属性后,元素会被显示为内联元素,元素则不会换行。block:使用此属性后,元素会被现实为块级元素,元素会进行换行。inline-block:是使元素以块级元素的形式呈现在行内...