我将如何正确设置导航栏的样式以使其更靠近边缘

如何解决我将如何正确设置导航栏的样式以使其更靠近边缘

我的导航栏有问题，我想知道如何使布景更靠近最左边的边缘。

CSS：

#nav
{
   overflow: auto;        
   user-select: none;
   background: grey;
   width: 100%;
}
#nav li
{
   display: inline-block;
   list-style-type: none;   /* removes bullets */
   padding: 10px;            
   margin: 0px;             /* removes margins */
   background: grey;
}
#nav li:hover
{
   background: green;
   user-select: green;
}

小提琴：https://jsfiddle.net/yumyum0/cgx61w0q/2/

另外，我不确定#nav li:hover 中的背景和用户选择是否多余。我根据 https://html.com/css/#example-nav 上的教程对其进行建模，并开始添加内容以尝试按照我想要的方式设置样式。我离知道所有声明的作用还有很长的路要走。它曾经是齐平的，所以我想我可能添加了一些有冲突的东西，或者我在不知情的情况下删除了它。

我也有一个与此无关的问题，这种格式可以吗？我不确定是否就括号和其他所有内容达成一致。

解决方法

将此规则集放在代码的开头将删除导航栏顶部的边距。

* {
    position: relative;
    margin: 0 0;
}

您的格式略有偏差；将左括号与 CSS 选择器放在同一行，并确保规则集之间存在间隙，以提高可读性。

您可以将绝对定位并声明它必须位于页面的最左侧。

#nav 
{
  overflow: auto;
  user-select: none;
  background: grey;
  width: 100%;
  position: absolute;
  left: 0;
}

代码样式由您决定！我喜欢把名字和大括号放在同一行，比如 #nav {

一件好事是设置 HTML 和 Body 标签的样式。这就是我要做的：

html,body {
  margin: 0; // Removes space on the sides
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

#nav 
{
  overflow: auto;
  user-select: none;
  background: grey;
  width: 100%;
  box-sizing: border-box; // Add this to take 100% width without overflowing
  margin: 0; // Remove space above nav bar
}

...rest of your CSS

导航间距：需要研究的一件事是一种名为“CSS Reset”的解决方案。 Chrome 和 Firefox 等浏览器对 HTML 选择器有不同的“基本值”。重置样式表可确保您的所有元素都具有相同的“基本”样式。有 1000 种不同的重置表是不同的人尝试过的。在我看来，它们大致都在做同样的事情。默认情况下，<body> 标签有分配给它的边距。除其他外，重置表通常会将这些分配给 0。
与上面类似，默认情况下 <ul> 标签也有边距。您应该添加以下 CSS：

html,body {
  margin: 0;
}

#nav 
{
  background: grey;
  width: 100%;
  margin: 0;
}

让我们讨论 user-select 属性。您可以使用此属性来针对网页上的复制/粘贴情况定位“突出显示”或“文本选择”。我不认为这是您应该用于“悬停”效果的内容。使用 background 属性应该没问题。