控制<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

回答

相關問題