使用 display 将 HTML 元素从内联更改为块的真实示例

编程问答 2022-05-01

问题描述

问题：

当您需要对内联元素使用 display: block 时，有兴趣了解 HTML/CSS 中是否有任何实际示例。对于相反的顺序，我发现可以在 display: inline 中的 <li> 上使用 <nav> 来垂直显示链接。我不想知道 inline、block 和 inline-block 之间的区别。

当前示例：

当前示例包括展示如何在 display: block 元素上使用 <span>，等等。但其中许多示例仅说明了 display: block 的效果，并未说明它在网站上的实际使用情况。

问题：

使用 display: block 将元素从内联级更改为块级的原因是什么？在网站上的哪个位置与此相关？

解决方法

假设您想显示一个链接到网站的大按钮。您使用 anchor (<a>) 标签是因为它可以包含超链接。

div {
  border: 1px solid black;
  padding: 20px;
}

.button {
  background: orange;
  color: white;
  padding: 10px;
  text-align: center;
}
<div>
  This button's on the same line! <a class="button" href="https://example.com">Click me!</a>
</div>

您添加了按钮，但遇到了一个问题：该按钮与所有其他文本位于同一行。是inline！

添加 display: block 不仅会添加换行符，还可以让您更好地控制按钮的宽度和高度。

div {
  border: 1px solid black;
  padding: 20px;
}

.button {
  display: block;

  background: orange;
  color: white;
  padding: 10px;
  text-align: center;
}
<div>
  This button's aligned properly. <a class="button" href="https://example.com">Click me!</a>
</div>

如果您想控制按钮的宽度和高度，同时将其保持在同一行上，您可以使用 inline-block。

Further reading

displayhtmlinline-styles