固定的導航欄列表項不起作用

我有這個導航欄：Codepen。這是一個固定的導航欄，我希望超過980像素有一個固定的寬度（以像素爲單位），但我不知道爲什麼最後一個列表項在導航欄下。固定的導航欄列表項不起作用

<header class="" role="banner"> 
<nav role="navigation"> 
    <a href="index.html" class="nav-logo"></a> 
    <ul class="nav-list"> 
    <li><a href="#" class="current">hi</a></li> 
    <li><a href="#">there</a></li> 
    <li><a href="#">I</a></li> 
    <li><a href="#">have</a></li> 
    <li><a href="#">a</a></li> 
    <li><a href="#">problem</a></li> 
    </ul> 
    <span class="nav-toggle">&#x2261;</span> 
</nav>

來源

2014-09-05 rick_zan

沒有足夠的空間讓您的浮動項目是在同一條線上的其餘..增加885px'修復了這個你'nav'項目'..或者你可以減少你的項目的寬度 – haxxxton 2014-09-05 00:54:21

最後一個列表項沒有相同的填充和相同的大小...在導航欄的最後部分有一個空間，但我希望ul佔用所有空間 – 2014-09-05 08:10:18

檢查這可以幫助你：http://codepen.io/panchroma/pen/IoGvl

在你的CSS始於52行你有

@media screen and (min-width: 980px) { 
    nav[role=navigation] { 
    width: 882px; 
    margin: 0 30px; 
    }

但這並不寬到足以容納你的菜單項。在我編輯的筆，我改變了寬度970像素

編輯

我想，每一個列表項具有相同的大小，以及導航欄本身十個分量的保證金的權利和利潤率左30PX

現在檢查我的筆：http://codepen.io/panchroma/pen/IoGvl 問題的根源仍然是沒有足夠的空間來適應一切。

導航元素本身的左右邊距爲30像素，導航圖標上有左側和右側的2em邊距，每個點上的左側邊界加上每個li> a的寬度

如果我正確理解你的描述，增加導航寬度爲888像似乎有幫助。你是否已經將列表項目的左邊框的1 x 6像素寬度計算到了計算中？

希望這會有所幫助！

來源

2014-09-05 01:01:07

@ user3654340，請檢查我的意見以上 – 2014-09-05 13:01:43

謝謝，我沒有注意到li項目的1 x 6px寬度！有沒有辦法去掉最後一個清單項目的剩餘空間（沒有打破它的位置）？ @DavidTaiaroa – 2014-09-05 14:54:53

我不確定你指的是@ user3654340的空間。另一種選擇是將li> a元素的寬度從131更改爲130px。請參閱http://codepen.io/panchroma/pen/DneJv – 2014-09-06 14:25:20

感謝您的幫助！與此解決：Codepen。我所做的只是將nav包裹在一個元素中，並給它填充：0 30px以創建一個固定的導航（在某個斷點上）。

<header> 
    <nav> 
    <ul> 
     <li><a href="home.html">Home</a></li> 
     <li><a href="about.html">About</a></li> 
     <li><a href="services.html">Services</a></li> 
     <li><a href="products.html">Products</a></li> 
     <li><a href="jobs.html">Jobs</a></li> 
     <li><a href="contact.html">Contact</a></li> 
    </ul> 
    </nav> 
</header>

CSS補充：

@media only screen and(min-width: 980px) { 
    header { 
    padding: 0 30px; 
    } 
}

來源

2014-09-06 16:00:23

固定的導航欄列表項不起作用

回答

相關問題