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>

调整浏览器窗口大小时

4 个答案: