如何移除inline-block元素之間的空格?
Sep 22, 2023 pm 10:25 PM
移除空格
inline-block
元素間隔
我們可以輕鬆刪除內嵌區塊元素之間的空格。在繼續之前,讓我們先建立一個 HTML 文件並添加帶有空格的內聯區塊元素 -
範例
<!DOCTYPE html> <html> <head> <title>Inline block elements</title> <style> li { display: inline-block; width: 150px; font-size: 18px; } li:nth-child(1) { background: green; color: white; } li:nth-child(2) { background: orange; color: black; } li:nth-child(3) { background: blue; color: white; } li:nth-child(4) { background: red; color: black; } </style> </head> <body> <h1 id="Free-Tutorials">Free Tutorials</h1> <p>We have the following tutorials right now:</p> <ul> <li>Java</li> <li>Python</li> <li>Machine Learning</li> <li>Automation</li> </ul> </body> </html>
登入後複製
現在讓我們來看一些刪除內聯區塊元素之間的空格的範例 -
刪除內聯區塊元素之間的空格
我們可以透過將無序列表項排列在一行中來刪除內聯區塊元素之間的空格 -
範例
<!DOCTYPE html> <html> <head> <title>Inline block elements</title> <style> li { display: inline-block; width: 150px; font-size: 18px; } li:nth-child(1) { background: green; color: white; } li:nth-child(2) { background: orange; color: black; } li:nth-child(3) { background: blue; color: white; } li:nth-child(4) { background: red; color: black; } </style> </head> <body> <h1 id="Free-Tutorials">Free Tutorials</h1> <p>We have the following tutorials right now:</p> <ul> <li>Java</li><li>Python</li><li>Machine Learning</li><li>Automation</li> </ul> </body> </html>
登入後複製
透過跳過結束標記來刪除內聯區塊元素之間的空格
我們也可以透過跳過分類標籤來刪除空格 -
範例
#<!DOCTYPE html> <html> <head> <title>Inline block elements</title> <style> li { display: inline-block; width: 150px; font-size: 18px; } li:nth-child(1) { background: green; color: white; } li:nth-child(2) { background: orange; color: black; } li:nth-child(3) { background: blue; color: white; } li:nth-child(4) { background: red; color: black; } </style> </head> <body> <h1 id="Free-Tutorials">Free Tutorials</h1> <p>We have the following tutorials right now:</p> <ul> <li>Java <li>Python <li>Machine Learning <li>Automation </ul> </body> </html>
登入後複製
以上是如何移除inline-block元素之間的空格?的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

&lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼?

我如何使用html5&lt; time&gt; 元素以語義表示日期和時間?
