Question

出于某种原因，当我放大网页时，导航栏会缩小到垂直条（当没有足够的空间让水平条适合时）。我认为“浮动：左”命令会纠正这种情况，但我错了。我该如何解决这个问题？

.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>

Answer 1

发生的事情是您的navbar和nav元素没有设置的宽度。 float只是告诉元素缩小到其内容，并且像内联元素一样几乎。

如果您希望导航栏不缩小，则需要为其设置min-width，以便在屏幕缩小时，导航栏至少是防止li进入的必要大小到了新的一行。

Answer 2

尝试以下css：li的宽度是百分比（我把14％）和背景颜色属性设置在li而不是a。 html代码是一样的。

当我放大时，为什么我的导航栏会切断？

2 个答案: