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

Question

问题：

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

当前示例：

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

问题：

出于什么原因以及在网站上的什么地方使用 display: block 将元素从内联级更改为块级可能相关？

Answer 1

假设您想显示一个链接到网站的大按钮。您使用 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>

If you wanted to control the button's width and height, while keeping it on the same line, you would use inline-block.

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

Real-world example of using display to change HTML elements from inline to block

html

css

inline-styles

display