成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

解決inline-block元素的3個(gè) bug

yuanxin / 3133人閱讀

摘要：在使用時(shí)，有時(shí)候出現(xiàn)的效果莫名奇妙，例如兩個(gè)元素之間如果有空格回車，那么在頁(yè)面上就有一個(gè)空隙兩個(gè)不同高度的元素頂部無(wú)法對(duì)齊，或者使用下面無(wú)緣無(wú)故多出幾像素例子出現(xiàn)空隙效果解決方法去掉空格添加父元素，將父元素的設(shè)置為，然

在使用inline-block時(shí)，有時(shí)候出現(xiàn)的效果莫名奇妙，例如：



兩個(gè)inline-block 元素之間如果有空格、回車、tab，那么在頁(yè)面上就有一個(gè)空隙


兩個(gè)不同高度的 inline-block 元素頂部無(wú)法對(duì)齊，或者使用inline-block下面無(wú)緣無(wú)故多出幾像素
例子1,出現(xiàn)空隙 




  
  JS Bin
效果：

解決方法

1.去掉空格





  
  JS Bin

2. 添加父元素，將父元素的 font-size 設(shè)置為0，然后在 inline-block 元素中將 font-size 設(shè)置為 14px





  
  JS Bin

3. 使用margin-right





  
  JS Bin

4. 添加父元素，使用letter-spacing（該屬性增加或減少字符間的空白（字符間距））





  
  JS Bin

5. 使用word-spacing （該屬性增加或減少單詞間的空白（即字間隔））





  
  JS Bin
解決效果：

例子2，設(shè)置inline-block 后，莫名其妙出現(xiàn)一些空白 




  
  span設(shè)為inline-block之后下面的空白
效果

解決方法

使用vertical-align





  
  span設(shè)為inline-block之后下面的空白
解決效果

例子3，兩個(gè)不同高度的 inline-block 元素頂部無(wú)法對(duì)齊 




  
  JS Bin
效果

解決方法

還是使用vertical-align





  
  JS Bin
解決效果

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112500.html

相關(guān)文章

  • 解決inline-block元素的3個(gè) bug

    摘要：在使用時(shí)，有時(shí)候出現(xiàn)的效果莫名奇妙，例如兩個(gè)元素之間如果有空格回車，那么在頁(yè)面上就有一個(gè)空隙兩個(gè)不同高度的元素頂部無(wú)法對(duì)齊，或者使用下面無(wú)緣無(wú)故多出幾像素例子出現(xiàn)空隙效果解決方法去掉空格添加父元素，將父元素的設(shè)置為，然 在使用inline-block時(shí)，有時(shí)候出現(xiàn)的效果莫名奇妙，例如： 兩個(gè)inline-block 元素之間如果有空格、回車、tab，那么在頁(yè)面上就有一個(gè)空隙 兩個(gè)不...

    546669204 評(píng)論0 收藏0

  • CSS魔法堂："那不是bug，是你不懂我!" by inline-block

    摘要：那不是，是我不懂而已。的用途之一西文是以空格來(lái)分隔單詞的，而漢字間則無(wú)需空格分隔，但為了統(tǒng)一西文東亞和的排版，于是抽象出一個(gè)名為的概念用于分隔詞義單元，則作為的值域，而定義域就是語(yǔ)言信息。 前言 每當(dāng)來(lái)個(gè)需要既要水平排版又要設(shè)置固定高寬時(shí)，我就會(huì)想起display:inline-block，還有為了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后發(fā)...

    cucumber 評(píng)論0 收藏0

  • 瀏覽器兼容問(wèn)題

    摘要：一什么是瀏覽器兼容問(wèn)題所謂的瀏覽器兼容性問(wèn)題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁(yè)面顯示效果不統(tǒng)一的情況。條件注釋最初于微軟的瀏覽器中出現(xiàn)，并且直至均支持。 一、什么是瀏覽器兼容問(wèn)題 所謂的瀏覽器兼容性問(wèn)題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁(yè)面顯示效果不統(tǒng)一的情況。在大多數(shù)情況下，我們的需求是，無(wú)論用戶用什么瀏覽器來(lái)查看我們的網(wǎng)站或者登陸我們的系統(tǒng)，都...

    wenshi11019 評(píng)論0 收藏0

  • margin相關(guān)基本知識(shí)

    摘要：也能用于內(nèi)聯(lián)元素這是規(guī)范所允許的的和屬性對(duì)非替換內(nèi)聯(lián)元素?zé)o效例如和。解決方法把左側(cè)塊級(jí)元素更改為內(nèi)聯(lián)元素，比如把更換為。 什么是 margin ? CSS 邊距屬性定義元素周圍的空間。通過(guò)使用單獨(dú)的屬性，可以對(duì)上、右、下、左的外邊距進(jìn)行設(shè)置。也可以使用簡(jiǎn)寫的外邊距屬性同時(shí)改變所有的外邊距?！猈3School 邊界，元素周圍生成額外的空白區(qū)?？瞻讌^(qū)通常是指其他元素不能出現(xiàn)且父元素背景可見(jiàn)的區(qū)...

    godiscoder 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<