调整浏览器窗口大小时

Question

我用 HTML 和 CSS 构建了一个网站，每当我调整浏览器窗口的大小（更小）时，它都会与网站的组件（例如导航栏）混淆。导航栏是一系列使用<img src= 链接到其目的地的图像。知道如何解决这个烦人的事情吗？

导航栏的代码如下：

<br />
<div id="nav"> 
   <a href="/"><img src="Home.png" /></a> </a>
 <a href="/blog"><img src="=blog.png" /></a> </a>
 <a href="register.php"><img src="adopt.png" /></a> </a>
 <a href="user.php"><img src="useradmin.png" /></a> </a>
 <!-- <a href="login.php"><img src="\logout.png" /></a> </a> -->
 <a href ="places.php"><img src="map.png"/></a> </a>
  <a href ="login.php?logout"><img src="logout.png"/></a> </a>
 <!--- <a href ="login.php"><img src="q.png"/></a> </a> -->
</div>

谢谢。

Answer 1

您应该在样式表中为菜单容器 (#nav) 指定宽度，如下所示：

#nav { 
width: 500px;
 } 

这样，您的菜单将永远不会缩小到指定大小以下，并且（在本例中为菜单的）布局不会中断。

既然如此，您的链接中还应该有 text，并使用一些 image replacement technique 将链接显示为图像/图形。

您的代码中也存在语法错误；你关闭所有锚元素两次。

Answer 2

在您的容器（或导航）上设置min-width。

Answer 3

在您的#nav 容器上设置一个宽度，该宽度等于您的导航按钮的所有宽度相加。例如：

#nav {
    padding: 0;
    margin: 0;
    width: 150px;
}

#nav a img {
    width: 25px; /* 6 buttons at 25px = 150px total */
    border: 0;
}

Answer 4

<br /> 
<div id="nav">  
<table border=0 cellpadding=0 cellspacing=0>
<tr><td>
  <a href="/"><img src="Home.png" /></a>
</td><td>
  <a href="/blog"><img src="blog.png" /></a>
</td><td>
  <a href="register.php"><img src="adopt.png" /></a>
</td><td>
  <a href="user.php"><img src="useradmin.png" /></a>
</td><td>
  <a href="places.php"><img src="map.png"/></a>
</td><td>
  <a href="login.php?logout"><img src="logout.png"/></a>
</td></tr>
</table>
</div>