我正在创建我的第一个响应式网站。我在水平居中的容器内有一个导航栏。 一切都有一个百分比大小(有这个术语吗？)。当我正确调整窗口大小时，导航栏会缩小。但是我的最后一个列表项(导航栏项)将向下移动。
我已经尝试了很多关于 min-width 的东西，我知道它与此有关。但是互联网上的所有解决方案都说我应该给导航栏(或 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;
}
最佳答案
您可以将菜单项的宽度更改为 20% 并应用 box-sizing:border-box。当您将以 px 为单位的边框大小与以 % 为单位的宽度混合时，您的问题是由于较小屏幕尺寸的宽度不足。
关于html - 调整大小时导航栏元素向下移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30829234/