固定的导航栏列表项不起作用

我有这个导航栏：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

固定的导航栏列表项不起作用

回答

相关问题