我觉得我要问一些愚蠢的问题，但无论如何，这里是:我无法在 chrome 或 safari 中显示内联 div。这是我的 html 文档:
<!doctype html>
<html>
<head>
</head>
<body>
<div style="display: inline; background-color: red; width: 100px; height: 100px;"></div>
<div style="display: inline; background-color: bisque; width: 100px; height: 100px;"></div>
<div style="display: inline; background-color: aliceblue; width: 100px; height: 100px;"></div>
<div style="display: inline-block; background-color: black; width: 100px; height: 100px;"></div>
<div style="display: inline; background-color: aqua; width: 100px; height: 100px;"></div>
</body>
</html>唯一显示的 div 是显示设置为“inline-block”的那个。我没有什么特别想要实现的，我只是想了解为什么“内联”div 没有出现，以加深我对 HTML 的理解。据我在网上看到的，其他人似乎在使用内联 div!
最佳答案
来自 the spec :
'height' Applies to: all elements but non-replaced inline elements, table columns, and column groups
和
width Applies to: all elements but non-replaced inline elements, table rows, and row groups
由于您设置了 display: inline，因此 div 元素是不可替换的内联元素，并且不会从这些属性中获取任何大小。
那些 div 没有任何内容，因此它们也不会从内容中获取任何大小。
因此它们不占用空间，也没有任何东西可以显示背景。
关于html - 内联div不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43592564/