Css 简明教程

CSS - inline-block

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

以下是内联块特性的部分内容：

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

display: inline-block 属性是 display: inline 和 display: block 属性的组合。它使元素不仅能像内联元素一样表现，还能像块级元素一样占据一行位置。

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

inline

block

inline-block

元素在同一行显示。

元素在新行显示。

元素在同一行显示。

不占据容器的全部宽度。

占据容器的全部宽度。

不占据容器的全部宽度。

默认情况下，没有边距或内边距。

默认情况下具有边距和内边距。

下图显示了内联、块级和内联块级元素的不同布局行为：

CSS Inline Block - With Different Behavior

以下是一个展示 display: inline 、 display: block 和 display: inline-block 属性的不同行为的示例 -

<html>
<head>
<style>
   .display-inline {
      display: inline;
      background-color: #1f9c3f;
      border: 2px solid #000000;
      color: #ffffff;
      padding: 5px;
      text-align: center;
   }
   .display-block {
      display: block;
      background-color: #1f9c3f;
      border: 2px solid #000000;
      color: #ffffff;
      padding: 5px;
      height: 30px;
      text-align: center;
   }
   .display-inline-block {
      display: inline-block;
      background-color: #1f9c3f;
      border: 2px solid #000000;
      color: #ffffff;
      padding: 5px;
      height: 30px;
      text-align: center;
   }
</style>
</head>
<body>
   <h2>Display Inline</h2>
   <div>There are many variations of passages of Lorem Ipsum available,
      <span class="display-inline">Tutorialspoint</span> ,
      by injected humour, or randomised words which don't
      look even slightly believable.</div>

   <h2>Display Block</h2>
   <div>There are many variations of passages of Lorem Ipsum available,
      <span class="display-block">Tutorialspoint</span> ,
      by injected humour, or randomised words which don't
      look even slightly believable.</div>

   <h2>Display Inline Block</h2>
   <div>There are many variations of passages of Lorem Ipsum available,
      <span class="display-inline-block">Tutorialspoint</span> ,
      by injected humour, or randomised words which don't
      look even slightly believable.</div>
</body>
</html>

CSS Inline Block - Navigation Links

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

<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);
   }
</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>

CSS Inline Block - Button Groups

你可以使用内联块级属性创建水平显示的按钮组。按钮将会在同一行上一起显示，并且它们将具有特定的宽度和高度。

<html>
<head>
<style>
   .button-group {
      display: inline-block;
      background-color: #ef4343;
   }
   button {
      padding: 10px;
      margin: 10px;
      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>

CSS Inline Block - Images And Text

内联块级属性会导致图像和 span 在同一行上显示，允许它们在块内水平对齐。

<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>

CSS Inline Block - Progress Bars

我们可以使用内联块级属性创建进度条。此属性与其他内联元素显示在同一行。

<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>