Question

更新：我试图让JSFiddle可视化问题，让我知道它是否无效......

受到w3schools教程的启发，我决定为我的网站制作一个标签菜单，因为它看起来非常棒。确实如此，除了（显然）当我是那个人的时候。我希望标签直接位于我的内容<div>上，并且两者都包装在包装<div>中以控制其位置和宽度。问题是我的菜单中的<nav>元素距离右边太远40像素，并且在它之间有一个大约20英寸像素的空间，而内容<div>。代码如下：

document.getElementById("nav01").innerHTML =
	"<ul id='menu'>" +
	"<li><a href='Index.html'>Ejendomme</a></li>" +
	"<li><a href='Customers.html'>Opgaver</a></li>" +
	"<li><a href='About.html'>Administrer</a></li>" +
	"</ul>";

// CSS Code for the menu
ul#menu {
    padding: 0;
    margin-left: 0;
    margin-bottom: 11px;
    display: block;
}

ul#menu li {
    display: inline;
    margin-right: 3px;
}

ul#menu li a {
    background-color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    color: #696969;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    color: white;
    background-color: black;
}

// CSS Code for the wrapper and content div
#wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    margin-top: 100px;
    background: none;
}

#content {
    //position: relative;
    min-height: 500px;
    border: 1px solid;
    border-radius: 0 0 5px 5px;
    background-color: white;
    font-family: arial;
    padding: 5px;
    padding-left:  15px;
    padding-right: 15px;
    border-radius: 0 0 5px 5px;
}

<div id="wrapper">
    
<!-- Tabs menu -->
<nav id="nav01"></nav>
   
<div id="content">
  <!--- Content goes here -->
</div>

<script src="./script/script.js"></script>

我已经搜索了这个问题，我已经阅读了很多内容，但我还没有真正理解我做错了什么？真的希望你们可以帮助我。

Answer 1

将此添加到您的css

ul {
    padding-left:0;
}

http://jsfiddle.net/fey0dcap/

Answer 2

在CSS文件末尾添加此内容

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

Answer 3

尝试添加

nav#nav01{
    padding: 0;
}

给你的CSS。这将使您摆脱导航偏移。

Answer 4

这有效JS FIDDLE

加

#nav01{border:0;padding:0;margin:0;}

Answer 5

ul#menu:first-child {
    padding-left: 0px;
}

^试试这个。我虽然没有测试过它！

编辑测试：）

Answer 6

这是多方面的组合，这里的许多答案都有助于解决问题。如果您遇到类似问题，我建议您全部阅读。首先在CSS中添加以下内容有助于删除<nav>字段中的任何不必要的偏移量（感谢Markai）：

nav#nav01{
    padding: 0;
}

问题的其余部分与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;
}

或者你可以在我所创造的非常讨厌，非常喜欢的JSFiddle中看到完整的代码和效果。非常感谢你帮助大家！

控制<nav>元素</nav>的位置

6 个答案: