我正在创建我的第一个响应式网站。我在水平居中的容器内有一个导航栏。所有东西都有一个百分比的大小（有这个术语吗？当我正确调整窗口大小时，导航栏会缩小。但是我的最后一个列表项（导航栏项）将向下移动。
我已经尝试了很多最小宽度的东西，我知道它与此有关。但是互联网上的所有解决方案都说我应该给导航栏（或ul？）一个固定的宽度（xxxx px）。我不想要这个，因为我希望它完全扩展。
.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;
}
您可以将菜单项的宽度更改为 20% 并应用 box-sizing:border-box 。您的问题是由于当您混合px边框大小和%宽度时，较小屏幕尺寸的宽度不足。
看小提琴