Html 为什么放大时导航栏会被切断？

出于某种原因，当我放大网页时，导航栏会压缩为垂直栏（当水平栏没有足够的空间容纳时）。我以为“float:left”命令可以纠正这种情况，但我错了。我怎样才能解决这个问题

.navbar
{
float:top;
width:100%;
height:30px;
display:inline-block;
}

li
{
float:left;
display:inline-block;
}

.nav 
{
list-style-type:none;
margin:0;
padding:0;
position:relative;
display:inline-block;
}

a:link, a:visited
{
display:inline-block;
width:182.8px;
line-height:30px;
padding-top:12px;
padding-right:5px;
padding-bottom:12px;
padding-left:5px;
text-decoration:none;
text-align:center;
background-color:#006b00;
color:white;
font-weight:bold;
float:left;
}

a:hover, a:active
{
background-color:#C0C0C0;
}

a:active
{
color:grey;
}

.nav_bar_text
{
font-size:17px;
}

.Mackin_text
{
font-size:17px;
vertical-align:text-center;
}

这是我的列表代码

<div class="navbar">
<ul class="nav">
<li><a class="nav_bar_text" href="index.html">Home</li></a>
<li><a class="nav_bar_text" href="Resources">Resources</li></a>
<li><a class="nav_bar_text" href="Calendar">Calendar</li></a>
<li><a class="nav_bar_text" href="Year Plan">Year Plan</li></a>
<li><a class="nav_bar_text" href="Gallery">Gallery</li></a>
<li><a class="nav_bar_text" href="Videos">Videos</li></a>
<li><a class="Mackin_text" href="#Mackin Society">Mackin Society</li></a>
</ul>
</div>

发生的情况是，您的

navbar

和

nav

元素没有设置宽度

float

只是告诉元素收缩到其内容，其行为几乎与内联元素类似

---

如果你想让导航栏不压缩，你需要给它们一个

minwidth

，这样当屏幕缩小时，导航栏的大小至少是必要的，以防止

li

s下降到新行。

试试下面的css：li的宽度是百分比（我放14%）背景色属性设置为li而不是a。html代码是一样的。

非常感谢！虚拟击掌！我将在3分钟内接受你的回答@用户3362546没有问题。如果我在li元素上设置了background color属性，它将不会因为某种原因将整个块设置为该颜色。上面的答案解决了我的问题，但li的宽度也会干扰块的宽度（我花了39分钟来修正它）。我很感激你的回答，希望我能为你做点什么。