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

Question

我的导航栏有问题，我想知道如何让设置更靠近最左边。

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;
}

Fiddle: https://jsfiddle.net/yumyum0/cgx61w0q/2/

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

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

Answer 1

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

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

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

Answer 2

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

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

代码样式由您决定！我喜欢将名称与大括号保持在同一行，例如 #nav {

Answer 3

设置 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

Answer 4

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

html, body {
  margin: 0;
}

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

让我们讨论一下 user-select 属性。此属性是您为网页上的 copy/paste 情况定位“突出显示”或“文本 select”所使用的。我不认为这是你应该使用的“悬停”效果。使用 background 属性.

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

How would I properly style the nav bar to be closer to the edge

html

css

nav