【整理】幾種解決inline-block間隙的方案

array_huang 發布于2019-08-29 13:20 / 2387人閱讀

摘要：有基礎的朋友可以直接跳過序言，直接看方案序有幾種屬性是內聯對象，比如標簽等，可以堆在一起顯示，寬高由內容決定，不能設置是塊對象，比如標簽等，要占一整行，但是寬高可以自定義為了彌補和的不足，又擴充了屬性可以將對象呈遞為內聯對象，而內容作為

有基礎的朋友可以直接跳過序言，直接看方案

序

display有幾種屬性：

inline是內聯對象，比如、標簽等，可以“堆在一起”顯示，寬高由內容決定，不能設置；
block是塊對象，比如

、

標簽等，要占一整行，但是寬高可以自定義；
為了彌補inline和block的不足，又擴充了inline-block屬性；
inline-blcok可以將對象呈遞為內聯對象，而內容作為塊對象呈遞。

通俗點講就是

“可定寬高的堆在一起”顯示

為什么會有間隙

inline-blcok塊之間的不可見符號會被保留父層字體的1/3大小的空間

解決方案

知道了原因，方案就好找了，我把它分為以下幾種


    item1
    item2
    item3
    item4
    item5

1、改變書寫結構


    item1
item2
item3
item4
item5


    
        item1

        item2

        item3

        item4

        item5


    item1
item2
item3
item4
item5


    item1
item2
item3
item4
item5

以上幾種均可以完美的達到去除間隙的作用
但是，從代碼的可讀性上看，或多或少有一些不足

2、打包工具

使用打包工具或者自寫腳本，在上線前將響應HTML代碼打包成一行，即可

3、丟失結束標簽


    item1
    
item2
    
item3
    
item4
    
item5

此方法雖然可以解決此問題，但是在Doctype為xhtml時將報錯，所有方法是否適用須視情況而定。

4、css hack

知道間隙的產生原因和間隙的大小后，動手寫一個css hack也是一種很好的方法
1、將父容器的字體大小設置為0，可解決絕大多數瀏覽器（老版本safari不支持）
2、針對不支持上條的瀏覽器設置字塊或字符間間隙letter-spacing／word-spacing，推薦letter-spacing，因為此屬性不會產生負間隙，但需要注意，要在子元素上設置letter-spacing:0
3、如果你轉化但是塊對象，那需要為低版本瀏覽器設置inline兼容，不讓樣式會亂掉
總結以上幾點給出以下代碼

.parent {
    letter-spacing: -.3333em;
    font-size: 0;
}
.child {
    display: inline;
    display: inline-block;
}

如發現文字有不妥之處，還請不吝賜教

GPU云服務器云服務器電商的解決方案大數據收集整理方案數據整理及存儲方案云計算的解決方案

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

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

未知寬度水平居中的幾種方法

摘要：在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。但即使我們沒有設置的寬度直接設置的外邊距就可以實現水平居中了這樣我們就可以通過設置水平居中間接使里面的內容居中。轉自未知寬度水平居中的幾種方法在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。當時在網上找了一些解決方法，并選了一個最合適的方法，現將...

raledong 2019-08-28 18:05 評論0 收藏0
未知寬度水平居中的幾種方法

摘要：在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。但即使我們沒有設置的寬度直接設置的外邊距就可以實現水平居中了這樣我們就可以通過設置水平居中間接使里面的內容居中。轉自未知寬度水平居中的幾種方法在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。當時在網上找了一些解決方法，并選了一個最合適的方法，現將...

shenhualong 2019-08-01 14:46 評論0 收藏0
前端面試基礎(1年以內需掌握)

摘要：客戶端數據存儲，能維持在多個會話范圍內。向元素開頭插入由參數指定的內容。向匹配的元素添加指定的類名。移除指定的屬性。主要解決了中大量的操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗。區別數據驅動，通過數據來顯示視圖層而不是節點操作。金三銀四公司讓我面試 1年經驗的前端，特此花時間研究了一番面試題，近日整理了一下想分享出來，讓更多小掘友看到，在我看來這些基本都是必備的知識點 cs...

xiaochao 2019-05-22 19:43 評論0 收藏0
前端面試之路一(HTML+CSS面試整理)

摘要：或表示紅色，表示綠色，表示藍色，也可取其他數值來指定顏色。針對多字節文字，中文句子也是單詞允許在單詞內換行。一、HTML基礎 html常見元素和理解 html常見元素分類 head區元素：（不會在頁面上留下直接內容） meta title style link script base body區： div/selection/article/aside/header/f...

hqman 2019-08-02 12:09 評論0 收藏0
前端面試之路一(HTML+CSS面試整理)

摘要：或表示紅色，表示綠色，表示藍色，也可取其他數值來指定顏色。針對多字節文字，中文句子也是單詞允許在單詞內換行。一、HTML基礎 html常見元素和理解 html常見元素分類 head區元素：（不會在頁面上留下直接內容） meta title style link script base body區： div/selection/article/aside/header/f...

YacaToy 2019-08-29 17:26 評論0 收藏0