您好,登錄后才能下訂單哦!
這篇“怎樣去掉HTML中Inline-Block的空白”文章,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要參考一下,對(duì)于“怎樣去掉HTML中Inline-Block的空白”,小編整理了以下知識(shí)點(diǎn),請大家跟著小編的步伐一步一步的慢慢理解,接下來就讓我們進(jìn)入主題吧。
html的全稱為超文本標(biāo)記語言,它是一種標(biāo)記語言,包含了一系列標(biāo)簽.通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一,使分散的Internet資源連接為一個(gè)邏輯整體,html文本是由html命令組成的描述性文本,html命令可以說明文字,圖形、動(dòng)畫、聲音、表格、鏈接等,主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁。
當(dāng)需要在”inline”元素上控制margin和padding時(shí),inline-block屬性值變得非常有用,有了它,你不在需要讓這些元素去“block”和“float”。但有一個(gè)問題,當(dāng)使用inline-block時(shí),HTML元素之間的空白會(huì)顯示在頁面上。很討厭。有幾種方法可以除去這些空白;其中一個(gè)非常巧妙。
方法1:各元素間不留任何空白
一個(gè)100%能解決這個(gè)問題的方法是在你的HTML代碼里元素間不留任何空白:
<ul> <li>Item content</li> <li>Item content</li> <li>Item content</li> </ul>
當(dāng)然,這樣看起來很亂,讓代碼不好維護(hù),但很實(shí)用,很直觀,更重要的……很可靠。
方法2:在父元素上設(shè)置font-size: 0
解決這個(gè)空白問題最好的方案是在這些inline-block元素的父元素上設(shè)置font-size: 0。如果你的<UL>里有inline-block的<LI>,那你可以這樣做:
.inline-block-list { /* ul or ol with this class */ font-size: 0; } .inline-block-list li { font-size: 14px; /* put the font-size back */ }
為了不讓父元素的字體大小影響子元素,你需要重新在子元素上設(shè)置font-size值,這通常很簡單。唯一可能遇到麻煩的情況是你用相對(duì)大小設(shè)置字體。但大多數(shù)時(shí)候,這樣的方法能解決你的問題。
方法3:HTML注釋
這種方法有點(diǎn)暴力,但同樣能奏效。將HTML元素間用注釋填充,這跟它們之間沒有空白效果一樣:
<ul> <li>Item content</li><!-- --><li>Item content</li><!-- --><li>Item content</li> </ul>
用一個(gè)詞…惡心。用兩個(gè)詞…非常惡心。用三個(gè)詞….OK,你明白。但這確實(shí)管用!
方法4:負(fù)邊距
跟方法2很相似,抱歉。你可以利用inline-block的靈活性,給它們設(shè)置一個(gè)負(fù)邊距,隱藏空白:
.inline-block-list li { margin-left: -4px; }
這種方法最不推薦,因?yàn)槟惚仨毧紤]到各種情況,有時(shí)候會(huì)出現(xiàn)一些無法預(yù)料的空白。最好不用這招。
方法5:首尾接龍
另外一個(gè)利用HTML標(biāo)記的方法是將元素的閉合標(biāo)記和下一個(gè)元素的開始標(biāo)記靠在一起:
<ul> <li>Item content</li ><li>Item content</li ><li>Item content</li> </ul>
并不像HTML注釋那樣丑陋,但我寧愿手工刪除那些空白,而不考慮代碼的可讀性。
沒有一個(gè)方法是非常理想的,但在網(wǎng)頁中不留空白也是一個(gè)爛方法。這并不是在警告你不要使用inline-block,inline-block仍然是非常的有用,只是在使用你要明白如何處理里面出現(xiàn)的空白。
以上是“怎樣去掉HTML中Inline-Block的空白”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。