国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

解決inline-block元素的3個 bug

546669204 / 2359人閱讀

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

</>復制代碼 
  1. 在使用inline-block時，有時候出現的效果莫名奇妙，例如：
  2. 兩個inline-block 元素之間如果有空格、回車、tab，那么在頁面上就有一個空隙
  3. 兩個不同高度的 inline-block 元素頂部無法對齊，或者使用inline-block下面無緣無故多出幾像素
例子1,出現空隙 
</>復制代碼 
  2.   
  3.   <span class="hljs-attr">JS</span> <span class="hljs-string">Bin</span>
  4.   
  5.   
  6.
效果：

解決方法

1.去掉空格

</>復制代碼 
  2.   
  3.   <span class="hljs-attr">JS</span> <span class="hljs-string">Bin</span>
  4.   
  5.

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

</>復制代碼 
  2.   
  3.   <span class="hljs-attr">JS</span> <span class="hljs-string">Bin</span>
  4.   
  5.   
  6.     
  7.     
  8.

3. 使用margin-right

</>復制代碼 
  2.   
  3.   <span class="hljs-attr">JS</span> <span class="hljs-string">Bin</span>
  4.   
  5.   
  6.

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

</>復制代碼 
  2.   
  3.   <span class="hljs-attr">JS</span> <span class="hljs-string">Bin</span>
  4.   
  5.   
  6.     
  7.     
  8.

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

</>復制代碼 
  2.   
  3.   <span class="hljs-attr">JS</span> <span class="hljs-string">Bin</span>
  4.   
  5.   
  6.     
  7.     
  8.
解決效果：

例子2，設置inline-block 后，莫名其妙出現一些空白 
</>復制代碼 
  2.   
  3.   span設為<span class="hljs-keyword">inline</span>-block之后下面的空白
  4.   
  5.   
  6.     
  7.
效果

解決方法

使用vertical-align

</>復制代碼 
  2.   
  3.   span設為<span class="hljs-keyword">inline</span>-block之后下面的空白
  4.   
  5.   
  6.     
  7.
解決效果

例子3，兩個不同高度的 inline-block 元素頂部無法對齊 
</>復制代碼 
  2.   
  3.   <span class="hljs-attr">JS</span> <span class="hljs-string">Bin</span>
  4.   
  5.   
  6.     
  7.
效果

解決方法

還是使用vertical-align

</>復制代碼 
  2.   
  3.   <span class="hljs-attr">JS</span> <span class="hljs-string">Bin</span>
  4.   
  5.   
  6.     
  7.
解決效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51193.html

相關文章

  • 解決inline-block元素的3個 bug

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

    yuanxin 評論0 收藏0

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

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

    cucumber 評論0 收藏0

  • 瀏覽器兼容問題

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

    wenshi11019 評論0 收藏0

  • margin相關基本知識

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

    godiscoder 評論0 收藏0

發表評論

0條評論

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