display:inline的用法

display:inline用于将元素转换为行内元素，即将行内元素设置为更加细小的尺寸，使其自适应其内容大小。在许多情况下，使用display:inline可以用于宽度的自适应，或用于在一行内水平排列多个元素。此外，display:inline还可以用于控制更细粒度的布局。

使用display:inline的示例：

示例1

假设我们要在一个段落中插入一张图片，并使图片自适应段落宽度时，可以使用以下代码：

<p>
  <img src="example.jpg" alt="Example Image" style="display:inline;">
</p>

在这个示例中，图片被设置为display:inline，这允许它自适应段落的宽度。

示例2

假设我们想要在同一行显示两个按钮。为此，我们可以使用以下代码：

<button style="display:inline;">Button 1</button>
<button style="display:inline;">Button 2</button>

在这个示例中，两个按钮都被设置为display:inline，这让它们显示在同一行中。这使得我们能够将按钮放在紧密的空间中，从而更有效地利用空间。

总结：
display:inline可以用于自适应宽度并使元素在一行内显示。此外，它可以用于细粒度的布局，使元素在整个页面上更好地分布。