Css 简明教程

CSS - inline-block

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

CSS inline-block property is used to display an element as an inline-level block container. Inline-block elements do not start on a new line, but they can be set to a specific width and height.

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

Here are some of the characteristics of the inline-block property:

The element will be displayed on the same line as other inline elements.
The element will have a width and height, but it will not have a margin or padding by default.
The element can be floated or positioned.
The element can be cleared of floats.

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

The display: inline-block property is a combination of the display: inline and display: block properties. It allows an element not only to behave like an inline element, but also have the ability to take up space on a line like a block element.

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

Difference between display: inline, display: block and display: inline-block:

inline

block

inline-block

The element is displayed on the same line.

The element is displayed on a new line.

The element is displayed on the same line .

It does not take up the full width of the container.

It takes up the full width of the container.

It does not take up the full width of the container.

It does not have a margin or padding by default.

It has a margin and padding by default.

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

Following diagram shows the different layout behavior of inline, block, and inline-block elements:

CSS Inline Block - With Different Behavior

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

Here’s an example that demonstrates the different behaviors of the display: inline, display: block and display: inline-block properties −

<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

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

The inline-block property is used to create horizontal navigation menus or lists, where each navigation item is displayed as a block-level element, but remains inline with other items.

<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

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

You can create button groups that are displayed horizontally using the inline-block property. The buttons will be displayed together on the same line, and they will have a specific width and height.

<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 在同一行上显示，允许它们在块内水平对齐。

The inline-block property causes the image and span to be displayed on the same line, allowing them to be aligned horizontally within the 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>

CSS Inline Block - Progress Bars

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

We can create progress bars using the inline-block property. This property is displayed on the same line as other inline elements.

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