Question

我觉得我要问一些愚蠢的东西，但无论如何，这里有：我无法在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。我想要实现的并不是什么特别的，我只是想了解为什么“内联”div没有出现，为了进一步理解HTML。从我在网上看到的，其他人似乎都在使用内联div！

Answer 1

来自the spec：

'height'适用于：所有元素，但未替换的内联元素，表格列和列组

和

width适用于：所有元素，但未替换的内联元素，表行和行组

由于您设置了display: inline，因此div元素是未替换的内联元素，并且不会从这些属性中获取任何大小。

这些div没有任何内容，因此它们也没有从内容中获得任何大小。

因此他们不占用空间，没有任何东西可以显示背景。

内联div不显示

1 个答案: