我试图使用容器div中的列表创建水平导航栏，遇到了令人困惑的事情。
[当我尝试将元素彼此相邻放置时，如果我根本不使用float，则列表项之间会有间隙，但是在边距和填充方面都很好。
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>将列表项用作导航栏是否不好，或者我使用错了吗？我很好奇是什么原因造成了该差距在列表的底部。
将列表项用作导航栏是否不好？
绝对不是！这是最常用的方法。
如果我根本不使用浮点数，则列表项之间会有间隙
我仍然认为您的第一个变体，最好仅使用inline-block，不使用float，
元素之间的空格是由li元素之间的HTML代码中的空格（缩进）引起的。您可以通过将所有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>此时，您应该使用Flexbox。您可以使用任何想要的元素，它更容易并且响应迅速！这只是一个简单易用的示例。
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: flex;
}
ul li {
flex: 1;
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>