如何移除inline-block元素之間的空格？
- PHPz轉載
- 2023-09-22 22:25:021434瀏覽
我們可以輕鬆刪除內嵌區塊元素之間的空格。在繼續之前，讓我們先建立一個 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>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>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>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中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除