为什么浮动在 div 内的行为会那样[重复]答案

【问题标题】：Why Does Floating Inside Div Behave Like That [duplicate]为什么浮动在 div 内的行为会那样[重复]
【发布时间】：2020-02-12 17:44:14
【问题描述】：

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

当我尝试将元素彼此相邻放置时，如果我根本不使用浮点数，列表项之间就会存在间隙，但边距和填充很好。

body {
  margin: 0px;
  padding: 0px;
}

div {
  text-align: center;
  background-color: gray;
  margin: 0px;
  padding: 0px;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

ul li {
  display: inline-block;
  color: white;
  background-color: blue;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="container">
  <ul>
    <li>Home</li>
    <li>Youtube</li>
    <li>Contact</li>
    <li>Support</li>
  </ul>

当我使用float: left; 时，列表中的 div 或边距中有不需要的填充。

body {
  margin: 0px;
  padding: 0px;
}

div {
  text-align: center;
  background-color: gray;
  margin: 0px;
  padding: 0px;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

ul li {
  display: inline-block;
  float: left;
  color: white;
  background-color: blue;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="container">
  <ul>
    <li>Home</li>
    <li>Youtube</li>
    <li>Contact</li>
    <li>Support</li>
  </ul>

为了解决这个问题，我将font-size: 0px 和font-size: 16px 用于<ul>。这解决了我的问题，但我不知道这样做是否正确，更重要的是是什么导致了那里的问题。

body {
  margin: 0px;
  padding: 0px;
}

div {
  font-size: 0px;
  text-align: center;
  background-color: gray;
  margin: 0px;
  padding: 0px;
}

ul {
  font-size: 16px;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

ul li {
  display: inline-block;
  float: left;
  color: white;
  background-color: blue;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="container">
  <ul>
    <li>Home</li>
    <li>Youtube</li>
    <li>Contact</li>
    <li>Support</li>
  </ul>

将列表项用作导航栏是不是很糟糕，或者我用错了？我很好奇是什么导致了列表底部的差距。

【问题讨论】：

在第二种情况下不要使用字体大小，调整垂直对齐方式，如副本中建议/解释的那样。对于第一个 sn-p，它是 inline-block 之间的空间的常见情况（检查第二个重复项）
@TemaniAfif 非常感谢，但有一件事我没有完全理解。不使用浮动时，我们不必垂直对齐列表，但在列表项浮动的其他情况下，可以通过垂直对齐来修复间隙。为什么会有区别？
默认的垂直对齐是基线。使用浮动，基线是元素的底部，因此我们需要在其下方留出空间（如副本中的图像）。没有浮动，基线是不同的，并且基于里面的文本。将 overflow: auto; 添加到您的第一个 sn-p 到 li 中，您将拥有相同的行为，因为我们更改了基线以使其像 float 一样位于底部。
检查这个：stackoverflow.com/q/9273016/8620333 ..它将帮助您了解如何识别元素的基线
@TemaniAfif 对不起，如果它太傻了，但为什么浮动改变了基线？我的意思是在这两种情况下都没有一些列表项吗？

标签： html css floating

【解决方案1】：

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

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

如果我根本不使用浮点数，列表项之间就会有间隙

我仍然认为您的第一个变体，仅使用 inline-block 而没有使用 float，是最好的。

元素之间的空格是由 HTML 代码中 li 元素之间的空格（缩进）引起的。您可以通过将所有 li 元素放在代码中的一行来删除它们，或者将它们之间的空格放在注释中，正如我喜欢这样做并在下面演示的那样：

body {
  margin: 0px;
  padding: 0px;
}

div {
  text-align: center;
  background-color: gray;
  margin: 0px;
  padding: 0px;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

ul li {
  display: inline-block;
  color: white;
  background-color: blue;
}

<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" type="text/css" href="myStyle.css">

  <title>Title</title>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

  <div class="container">
    <ul>
      <li>Home</li><!--
   --><li>Youtube</li><!--
   --><li>Contact</li><!--
   --><li>Support</li>
    </ul>

</body>

</html>

【讨论】：