原文:display:inline-block带来的问题及解决办法

在日常工作中,会经常遇到两个或多个元素并排排列的效果,以前会使用float等实现,float虽然方便好用,但是需要清除浮动,有时会带来意想不到的bug 而且在移动端是不推荐使用float的,所以使用display:inline block是一个不错的选择。 但是display:inline block有时也会带来各种问题,下面是我遇到的一些问题并附带解决办法 有的问题目前我还没有找到解决办法 . ...

2017-01-11 18:15 1 8373 推荐指数:

查看详情

使用display inline-block 布局时,出现的间距问题解决办法和相关说明

在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行。而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。 使用 display inline-block 将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联 ...

Thu Feb 14 23:28:00 CST 2019 1 705
displayinline-block的元素中间有间隙的原因和解决办法

displayinline-block的元素在水平方向上之间会有间隙 原因:标签与标签之间使用了空格或者是换行符(空白字符也是字符,样式会影响) 解决办法一: 不使用空白符号,使用注释替代换行、标签的结束标签与开始标签写在一起等(代码的可读性较差) 解决办法二:设置父元素的font-size ...

Thu Mar 12 06:02:00 CST 2020 0 1525
display:inline-block元素之间空隙的产生原因和解决办法

在CSS布局中,如果我们想要将一些元素在同一行显示,其中的一种方法就是把要同行显示的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间会出现一定的空隙。 效果图: 代码: <!DOCTYPE html> ...

Wed Aug 21 17:50:00 CST 2019 1 703
IE6、7下块级元素设置display:inline-block不换行的解决办法

使用背景 在实际的工作中,我们有的时候会把块元素设置为inline-block,这样做的目的有2个,一是块元素能够排列到一行,二是块元素就形成包裹性,能够自适应content area,而不必设置宽和高(依实际情况而定),在现在浏览器中没有什么问题,但是IE6、7下,当把block元素设置成 ...

Sun May 31 21:01:00 CST 2015 0 2415
input元素和display:inline-block的元素不在一行的解决办法

每次用到了<input/> 元素 和inline-block的<span></span>(不一定是span,其他一些inline的元素也是一样)元素,他们总是会不在一个水平线上,这个时候就很蛋疼了,毕竟不在水平线上,很不美观。 有以下解决办法 ...

Fri Jun 02 00:38:00 CST 2017 1 6767
inline-block元素之间空白间距的解决办法

有关于使用inline-block来代替float的讨论也蛮多的,最常说的就是使用inline-block来代替float进行布局,或者使用 inline-block来实现元素的居中效果。但是inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距。关于这个问题,原 ...

Tue Sep 15 05:02:00 CST 2015 0 2183
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM