导航栏项目在调整大小时向下移动

我正在创建我的第一个响应式网站。我有一个水平居中的容器内的导航栏。一切都有一个百分比的大小（这是否有一个术语？）。当我正确调整窗口大小时，导航栏缩小。但是我的最后一个列表项（导航栏项）将向下移动。导航栏项目在调整大小时向下移动

我已经尝试了很多最小宽度的东西，而且我知道它与此有关。但互联网上的所有解决方案都表示我应该给导航栏（或ul？）固定宽度（xxxx像素）。这我不想要，因为我希望它完全扩展。

HTML：

<body> 
<div id="container"> 
<nav> 
    <ul> 
     <li><span class="navbaritem">Test1</span></li> 
     <li><span class="navbaritem">Test2</span></li> 
     <li><span class="navbaritem">Test3</span></li> 
     <li><span class="navbaritem">Test4</span></li> 
     <li><span class="navbaritem">Test5</span></li> 
    </ul> 
</nav> 
</div> 
</body>

CSS：

@charset "utf-8"; 
/* CSS Document */ 

html 
{ 
     width:100%; 
    height:100%; 
} 
body 
{ 
    background-image:url(images/background.png); 
    background-repeat:repeat; 
    min-height:100%; 
    margin:0px; 
    overflow: auto; 
} 
#container 
{ 
    height:100%; 
    width:73.20%; 
    background-color:#00CC00; 
    margin: auto; 
    left:0; right:0; 
    top:0; bottom:0; 
    position:absolute; 
} 
#navbar 
{ 
    min-width:100%; 
    min-height:13.28125%; 
    position:absolute; 
    background-color:#FF0000; 
} 
nav { 
    position:relative; 
    background-color:#FF0000; 
    color: #888; 
    display: block; 
    width:100%; 
    height:13.28125%; 
} 
nav ul 
{ 
    list-style-type:none; 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
nav li 
{ 
    display: table; 
    float:left; 
    border-style: solid; 
    border-width: 1px; 
    border-color:#333; 
    width:20%; 
    height:100%; 
    text-align:center; 
    box-sizing:border-box; 
} 
.navbaritem 
{ 
    font-family: Cambria; 
    color:#CCCCCC; 
    font-size:36px; 
    display: table-cell; 
    vertical-align: middle; 
}

来源

2015-06-14 Kraishan

您的代码似乎工作就好了... ... http://jsfiddle.net/rx8bt8wq/ - ，你在你的CSS定义'＃navbar'的方式，但我没有看到任何具有该ID的HTML元素。 – odedta

这是正确的，#navbar是一个测试。我忘了离开！正如你可以在小提琴中看到的，第五个测试项目没有被显示。它可能会下移。就像调整原始网站时一样。 – Kraishan

如果您将'nav li'宽度更改为'width：15％;'您可以看到test5，这意味着您已经计算了我猜测的错误百分比。我会推荐以下@比利的答案。 – odedta

您可以将菜单项的宽度更改为20％和应用box-sizing:border-box。您的问题是由于在较小的屏幕尺寸下宽度不足，因此在混合px中的边框尺寸和%时的宽度。

See the fiddle

来源

2015-06-14 12:48:35 Billy

感谢您的回复。在你的小提琴中它很棒！但是，当我调整我的屏幕时，最后一个项目仍然下降。另外，如果我只是删除边界它仍然会掉下来thingie。 – Kraishan

你有完整的代码或分享链接到您的网站？这意味着可能还有其他影响它的东西。 – Billy

我使用完整的代码编辑了主帖。我为文本添加了一个navbaritem。在这个实施之前和之后，最后一个项目仍然停止。 – Kraishan

导航栏项目在调整大小时向下移动

回答

相关问题