Question

好吧我是关于CSS的新手，而在教程中我完全迷失了。据我所知，块元素占用整行。内联元素只占用元素的宽度和高度，而内联块的工作方式类似于内联元素，但在这里您可以设置宽度和高度。

好的，现在问题。在教程中，它创建了一个无序列表：

header nav ul li {
display: inline-block;
padding: 0;
}

列表中有5个元素。现在有4个元素是＆＃34;菜单＆＃34;，＆＃34;联系我们＆＃34;等等，但列表中的一个元素应该是徽标图像。现在添加徽标我需要这样做：

header nav ul li#logo a:link {
display: block;
width: 300px;
height: 260px;
background: url('images/logo.png') center center no-repeat;
}

但我得到的是，我首先将列表中的元素设置为内联块元素（这是有道理的，因为我希望它们彼此相邻，其中一个是图像。）但为什么在世界上我是否必须将列表中我想要包含徽标图像的元素转换为块元素？首先，我认为它将占用整行（但元素仍然是彼此相邻的），其次，我已经将列表中的元素转换为内联块元素？有谁知道答案？

Answer 1

考虑到以下几点，你应该知道锚为display: block

的原因

1- display:block设置为anchor内的li ...而不是直接li本身。

这就是为什么它仍然显示所有li彼此相邻，因为你将其中的一个内部元素更改为block而不是li本身。

2-锚点的默认display属性为inline ...这意味着您无法控制width和height。

3-为了能够在background-image内显示anchor，您必须设置一个特定的width和height，这就是显示从{{1}更改的原因}} inline能够控制block和width

顺便说一句，你也可以使用height和锚点，它会起作用