控制<nav>元素

更新的位置：我试图让一个JSFiddle可视化的问题，让我知道，如果它不能正常工作...控制<nav>元素

通过教程作为w3schools的启发，我决定做一个标签菜单为我的网站，因为它看起来真棒。事实上的确如此，除了（显然）当我成为它的时候。我想要直接放在我的内容<div>上的标签，并且它们都被封装在包装<div>中以控制它们的放置和宽度。问题在于，我的菜单中的<nav>元素距离右边太远的距离为40像素，并且在它与内容<div>之间的空间大约为20像素。其代码如下：

document.getElementById("nav01").innerHTML = 
 
\t "<ul id='menu'>" + 
 
\t "<li><a href='Index.html'>Ejendomme</a></li>" + 
 
\t "<li><a href='Customers.html'>Opgaver</a></li>" + 
 
\t "<li><a href='About.html'>Administrer</a></li>" + 
 
\t "</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>

我用Google搜索这个问题，我已经读了一堆东西，但我还没有能够真正理解它是什么，我做错了？真的希望你们能帮助我。

来源

2014-11-06 Noceo

添加一个http://jsfiddle.net/以便其他人可以看到你的意思，更改为代码直到它工作并发回新的小提琴总是一个好主意。 – 2014-11-06 14:16:56

我的第一个建议是将w3schools.com添加到您的个人阻止列表（或任何其他搜索结果阻止扩展名）。其次，我同意@MarcelBurkhard--添加一个jsfiddle。 – 2014-11-06 14:18:21

有趣的是：当我在jsfiddle中试用这段代码时，它工作得很好，但是使用“Run code snippet”它的行为就像你说的那样......你关闭了wrapper-div吗？ – Markai 2014-11-06 14:21:02

添加到您的CSS

ul { 
    padding-left:0; 
}

http://jsfiddle.net/fey0dcap/

来源

2014-11-06 14:18:39

sry我的意思是填充，而不是边距 – 2014-11-06 14:19:58

这解决了位置太靠右。它似乎没有改变菜单和内容区域之间的垂直间距。 – Noceo 2014-11-06 14:30:12

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

^试试这个。我还没有测试它！

编辑：测试:)

来源

2014-11-06 14:21:53

在你的CSS文件

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

来源

2014-11-06 14:22:33

尝试的末尾添加这

nav#nav01{ 
    padding: 0; 
}

添加到您的CSS。这将消除导航偏移量。

来源

2014-11-06 14:25:29 Markai

这工作JS FIDDLE

新增

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

来源

2014-11-06 14:45:52 Billy

这是多个事物的组合，很多问题的答案在这里帮助解决问题。如果您遇到类似问题，我建议您全部阅读。首先，添加以下的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。非常感谢你帮助大家！

来源

2014-11-06 14:48:41 Noceo

回答

相关问题