如何移除inline-block元素之间的空格？
- PHPz转载
- 2023-09-22 22:25:021403浏览
我们可以轻松删除内联块元素之间的空格。在继续之前，让我们首先创建一个 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删除