Html 为什么在Div中浮动会有这样的行为

我试图使用容器div中的列表创建一个水平导航栏，但遇到了一些令人困惑的事情

当我试图将元素放在彼此相邻的位置时，如果我根本不使用float，列表项之间会有一个间隙，但从边距和填充角度来看，这是可以的

正文{
边际：0px；
填充：0px；
}
div{
文本对齐：居中；
背景颜色：灰色；
边际：0px；
填充：0px；
}
保险商实验室{
列表样式类型：无；
边际：0px；
填充：0px；
显示：内联块；
}
ulli{
显示：内联块；
颜色：白色；
背景颜色：蓝色；
}

家
Youtube
接触
支持

使用列表项作为导航栏不好吗

绝对不是！这是最常见的方法

---

如果我根本不使用float，列表项之间就会有一个间隙

我仍然认为您的第一个变体，只使用

内联块

而不使用

浮点

，是最好的

元素之间的空格是由HTML代码中

li

元素之间的空格（缩进）造成的。您可以通过将所有

li

元素放在代码中的一行来删除它们，也可以通过将它们之间的空格放在注释中来删除它们，正如我喜欢做的，并在下面演示的那样：

正文{
边际：0px；
填充：0px；
}
div{
文本对齐：居中；
背景颜色：灰色；
边际：0px；
填充：0px；
}
保险商实验室{
列表样式类型：无；
边际：0px；
填充：0px；
显示：内联块；
}
ulli{
显示：内联块；
颜色：白色；
背景颜色：蓝色；
}

标题

主页
Youtube
联系
支持

使用列表项作为导航栏不好吗

绝对不是！这是最常见的方法

---

如果我根本不使用float，列表项之间就会有一个间隙

我仍然认为您的第一个变体，只使用

内联块

而不使用

浮点

，是最好的

元素之间的空格是由HTML代码中

li

元素之间的空格（缩进）造成的。您可以通过将所有

li

元素放在代码中的一行来删除它们，也可以通过将它们之间的空格放在注释中来删除它们，正如我喜欢做的，并在下面演示的那样：

正文{
边际：0px；
填充：0px；
}
div{
文本对齐：居中；
背景颜色：灰色；
边际：0px；
填充：0px；
}
保险商实验室{
列表样式类型：无；
边际：0px；
填充：0px；
显示：内联块；
}
ulli{
显示：内联块；
颜色：白色；
背景颜色：蓝色；
}

标题

主页
Youtube
联系
支持

在第二种情况下，不要使用字体大小，请按照副本中的建议/说明调整垂直对齐。对于第一个片段，它是内联块之间的空格（检查第二个副本）@TemaniAfif非常感谢，但有一件事我没有完全理解。当不使用float时，我们不必垂直对齐列表，但在另一种情况下，列表项是浮动的，有一个间隙可以通过垂直对齐来修复。为什么会有差异？默认的垂直对齐是基线。对于float，基线是元素的底部，因此我们需要在它下面留出空间（如副本中的图像）。如果没有浮动，基线是不同的，并且基于内部的文本。添加

溢出：自动到li的第一个代码段，您将有相同的行为，因为我们更改了基线，使其与float一样位于底部。。它将帮助您了解如何确定项目的基线elements@TemaniAfif抱歉，这太傻了，但为什么浮动会改变基线？我的意思是，在这两种情况下，不是都有一些列表项吗？在第二种情况下，不要使用字体大小，调整垂直对齐，就像副本中建议/解释的那样。对于第一个片段，它是内联块之间的空格（检查第二个副本）@TemaniAfif非常感谢，但有一件事我没有完全理解。当不使用float时，我们不必垂直对齐列表，但在另一种情况下，列表项是浮动的，有一个间隙可以通过垂直对齐来修复。为什么会有差异？默认的垂直对齐是基线。对于float，基线是元素的底部，因此我们需要在它下面留出空间（如副本中的图像）。如果没有浮动，基线是不同的，并且基于内部的文本。添加
溢出：自动到li的第一个代码段，您将有相同的行为，因为我们更改了基线，使其与float一样位于底部。。它将帮助您了解如何确定项目的基线elements@TemaniAfif抱歉，这太傻了，但为什么浮动会改变基线？我的意思是，这两种情况不都有一些列表项吗？