更新的位置:我试图让一个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搜索这个问题,我已经读了一堆东西,但我还没有能够真正理解它是什么,我做错了?真的希望你们能帮助我。
添加一个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