如何在行内块元素之间移除空格？

我们可以轻松删除行内块元素之间的空格。在继续之前，我们首先创建一个 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>

更新于: 17-Oct-2022

646 浏览量

开启你的 职业生涯

完成课程即可获得认证

开始
广告