Javascript 控制<；导航>；要素

更新：我试图对问题进行可视化，如果它不起作用，请告诉我

灵感来自一个教程，我决定为我的网站制作一个标签菜单，因为它看起来真的很棒。确实如此，除非（显然）是我做的。我想将标签直接放在我的内容上，两个标签都包装在一个包装器中，以控制它们的位置和宽度。问题是我的菜单中的

元素向右偏远了大约40 ish像素，在它和内容

之间有大约20 ish像素的空间。代码如下：

document.getElementById（“nav01”）.innerHTML=
“
”+
“
”+
“
”+
“
”+
“
”
//菜单的CSS代码
菜单{
填充：0；
左边距：0；
边缘底部：11px；
显示：块；
}
ul#菜单li{
显示：内联；
右边距：3倍；
}
菜单a{
背景色：#ffffff；
填充：10px 20px；
文字装饰：无；
颜色：#6969；
边界半径：4px4p0；
}
菜单李a：悬停{
颜色：白色；
背景色：黑色；
}
//包装器和内容div的CSS代码
#包装纸{
左边距：自动；
右边距：自动；
宽度：1000px；
边缘顶部：100px；
背景：无；
}
#内容{
//位置：相对位置；
最小高度：500px；
边框：1px实心；
边界半径：0 0 5px 5px；
背景色：白色；
字体系列：arial；
填充物：5px；
左侧填充：15px；
右侧填充：15px；
边界半径：0 0 5px 5px；
}

将此添加到css中

ul {
    padding-left:0;
}

将此添加到您的css中

ul {
    padding-left:0;
}


^试试这个。不过我还没有测试过

编辑：测试：）

^试试这个。不过我还没有测试过

编辑：测试：）
将此添加到CSS文件的末尾

ul#menu {
  padding: 0;
  margin-bottom: 9px;
}

将此添加到CSS文件的末尾

ul#menu {
  padding: 0;
  margin-bottom: 9px;
}

尝试添加

nav#nav01{
    padding: 0;
}

到你的css。这将消除导航偏移量。
尝试添加

nav#nav01{
    padding: 0;
}

到你的css。这将使您摆脱导航偏移。
这是可行的

增加

这很有效

增加

这是多种因素的结合，这里的许多答案帮助解决了这个问题。如果你遇到类似的问题，我建议你全部阅读。首先，在CSS中添加以下内容有助于删除
字段中任何不必要的偏移（感谢Markai）：

问题的其余部分与CSS中
ul#menu
中的填充有关。我添加了9像素的垂直填充和0像素的水平填充。再加上我添加的1像素边框，这将提供10像素的组合垂直偏移，与
ul#menu li a
中的垂直填充相匹配，将选项卡完美地放置在它们应该的位置。以下是CSS的更改部分：

nav#nav001 {
    padding: 0;
}

ul#menu {
    margin-left: 0;
    margin-bottom: 0;
    display: block;
    padding: 9px 0px;
}

ul#menu li a {
    border: 1px solid;
    margin: 0px;
    padding: 10px 20px;
    background-color: #ffffff;
    text-decoration: none;
    color: #696969;
    border-radius: 4px 4px 0 0;
}

或者你可以在我所创造的备受憎恨和爱戴的作品中看到完整的代码和效果。非常感谢你对大家的帮助
 这是多种因素的组合，这里的许多答案帮助解决了这个问题。如果你遇到类似的问题，我建议你全部阅读。首先，在CSS中添加以下内容有助于删除
字段中任何不必要的偏移（感谢Markai）：

问题的其余部分与CSS中
ul#menu
中的填充有关。我添加了9像素的垂直填充和0像素的水平填充。再加上我添加的1像素边框，这将提供10像素的组合垂直偏移，与
ul#menu li a
中的垂直填充相匹配，将选项卡完美地放置在它们应该的位置。以下是CSS的更改部分：

nav#nav001 {
    padding: 0;
}

ul#menu {
    margin-left: 0;
    margin-bottom: 0;
    display: block;
    padding: 9px 0px;
}

ul#menu li a {
    border: 1px solid;
    margin: 0px;
    padding: 10px 20px;
    background-color: #ffffff;
    text-decoration: none;
    color: #696969;
    border-radius: 4px 4px 0 0;
}

或者你可以在我所创造的备受憎恨和爱戴的作品中看到完整的代码和效果。非常感谢你对大家的帮助
 添加w3schools.com以使其他人了解您的意思始终是一个好主意，更改代码直到它工作并发回新的fiddle。我的第一个建议是您将w3schools.com添加到您的个人阻止列表（或任何其他搜索结果阻止扩展）中。第二，我同意@MarcelBurkhard-添加一个JSFIDLE。有趣的是：当我在JSFIDLE中尝试这段代码时，它工作得很好，但在“运行代码片段”中，它的行为就像您所说的那样。。。您是否关闭了包装器div？我尝试添加了一个JSFiddle，希望它能起作用。出于好奇，我们为什么不喜欢学校？我们喜欢什么呢？：-）或者，在帖子中添加一个片段，就像我对你的问题所做的那样。人们可以将代码片段复制到自己的答案、编辑代码等，而不用担心外部链接。以自反式的“添加一把小提琴！”评论为例（它会出现在你所问的任何与网络有关的问题上，甚至是模糊的）。添加一把小提琴总是一个好主意，这样别人就能明白你的意思，更改代码直到它工作并发回一个新的fiddle。我的第一个建议是将w3schools.com添加到您的个人阻止列表（或任何其他搜索结果阻止扩展）中。第二，我同意@MarcelBurkhard-添加一个JSFIDLE。有趣的是：当我在JSFIDLE中尝试这段代码时，它工作得很好，但在“运行代码片段”中，它的行为就像您所说的那样。。。您是否关闭了包装器div？我尝试添加了一个JSFiddle，希望它能起作用。出于好奇，我们为什么不喜欢学校？我们喜欢什么呢？：-）或者，在帖子中添加一个片段，就像我对你的问题所做的那样。人们可以将代码片段复制到自己的答案、编辑代码等，而不用担心外部链接。我的意思是填充，而不是边缘。这会使位置偏右。它似乎不会改变菜单和内容区之间的垂直间距。sry我指的是填充，而不是边缘。这会修复位置