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

資訊專欄INFORMATION COLUMN

解決inline-block元素的3個 bug

546669204 / 2403人閱讀

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

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

兩個inline-block 元素之間如果有空格、回車、tab,那么在頁面上就有一個空隙

兩個不同高度的 inline-block 元素頂部無法對齊,或者使用inline-block下面無緣無故多出幾像素

例子1,出現(xiàn)空隙




  
  JS Bin
  



  
效果:

解決方法

1.去掉空格





  
  JS Bin
  



  

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





  
  JS Bin
  



  

3. 使用margin-right





  
  JS Bin
  



  

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





  
  JS Bin
  



  

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





  
  JS Bin
  



  
解決效果:

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




  
  span設為inline-block之后下面的空白
  



  
效果

解決方法

使用vertical-align





  
  span設為inline-block之后下面的空白
  



  
解決效果

例子3,兩個不同高度的 inline-block 元素頂部無法對齊




  
  JS Bin
  



  
    
效果

解決方法

還是使用vertical-align





  
  JS Bin
  



  
    
解決效果

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

轉載請注明本文地址:http://systransis.cn/yun/51193.html

相關文章

  • 解決inline-block元素3 bug

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

    yuanxin 評論0 收藏0
  • CSS魔法堂:"那不是bug,是你不懂我!" by inline-block

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

    cucumber 評論0 收藏0
  • 瀏覽器兼容問題

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

    wenshi11019 評論0 收藏0
  • margin相關基本知識

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

    godiscoder 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<