CSS - 内联块

CSS inline-block 属性

用于显示的CSS inline-block属性值用于将元素显示为内联级块容器。内联块元素不会从新行开始，但可以将它们设置为特定的宽度和高度。

以下是 inline-block 属性的一些特征：

该元素将与其他内联元素显示在同一行。
该元素将具有宽度和高度，但默认情况下不会有边距或填充。
该元素可以浮动或定位。
可以清除元素中的浮动。

display : inline-block属性是display: inline和display: block属性的组合。它不仅允许元素表现得像内联元素，而且还能够像块元素一样占用行上的空间。

CSS 顺序 - 演示

尝试为 CSS显示属性选择不同的值，并在右侧框中查看结果。

内联 vs 块 vs 内联块

display: inline、display: block和display: inline-block之间的区别：

排队	堵塞	内联块
该元素显示在同一行。	该元素显示在新行上。	该元素显示在同一行。
它不占据容器的整个宽度。	它占据了容器的整个宽度。	它不占据容器的整个宽度。
默认情况下它没有边距或填充。	默认情况下它有边距和填充。	默认情况下它有边距和填充。

下图显示了inline、block和inline-block元素的不同布局Behave：

例子

下面是一个示例，演示了display: inline、display: block和display: inline-block属性的不同Behave-

<html>
<head>
<style>
    span{
      background-color: #40a944;
      border: 2px solid #000000;
      padding: 5px;
    }
   .display-inline {
      display: inline;

   }
   .display-block {
      display: block;
   }
   .display-inline-block {
      display: inline-block;
   }
</style>
</head>
<body>
   <h2>Display Inline</h2>
   <div>One  <span class="display-inline">Two</span> Three

   <h2>Display Block</h2>
   <div>One  <span class="display-block">Two</span> Three

   <h2>Display Inline Block</h2>
   <div>One  <span class="display-inline-block">Two</span> Three

</body>
</html>

使用内联块的导航链接

inline-block属性用于创建水平导航菜单或列表，其中每个导航项显示为块级元素，但与其他项保持内联。

例子

这是一个例子 -

<html>
<head>
<style>
   ul {
      list-style-type: none;
      margin: 0;
      padding: 15px;
      background-color: #1f9c3f;
   }
   li {
      display: inline-block;
   }
   a {
      padding: 10px;
      color: rgb(247, 247, 247);
      text-decoration:none;
   }
   a:hover{
       background: rgb(53, 200, 91);
   }
</style>
</head>
<body>
   <ul>
      <li><a href="#">Tutorialspoint</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Articles</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">About us</a></li>
   </ul>
</body>
</html>

使用内联块的按钮组

您可以使用inline-block属性创建水平显示的按钮组。这些按钮将一起显示在同一行，并且它们将具有特定的宽度和高度。

例子

这是一个例子 -

<html>
<head>
<style>
   .button-group {
      display: inline-block;
      background-color: #d1d1d1;
   }
   button {
      padding: 5px;
      margin: 5px;
      background-color: #1f9c3f;
      border: none;
      color: #ffffff;
      width: 80px;
      height: 40px;
   }
</style>
</head>
<body>
   <div class="button-group">
      <button>Submit</button>
      <button>Cancel</button>
      <button>Reset</button>
   </div>
</body>
</html>

使用内联块的图像和文本

inline -block属性使图像和跨度显示在同一行上，从而允许它们在块内水平对齐。

例子

这是一个例子 -

<html>
<head>
<style>
   div {
      display: inline-block;
   }
   img {
      width: 100px;
      height: 100px;
   }
   span {
      padding: 10px;
   }
</style>
</head>
<body>
   <div>
      <img src="images/tutimg.png" alt="Image">
      <span>Tutorialspoint</span>
   </div>
</body>
</html>

使用内联块的进度条

我们可以使用inline-block属性创建进度条。该属性与其他内联元素显示在同一行。

例子

这是一个例子 -

<html>
<head>
<style>
   .progress-bar {
      display: inline-block;
      width: 100%;
      height: 25px;
      background-color: blue;
      border-radius: 15px;
      overflow: hidden;
   }
   .progress-bar-fill {
      width: 70%;
      background-color: #1f9c3f;
      height: 100%;
   }
</style>
</head>
<body>
   <div class="progress-bar">
      <div class="progress-bar-fill"></div>
   </div>
</body>
</html>