調整瀏覽器窗口大小時

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;
 } 

這樣，您的菜單將永遠不會縮小到指定的大小以下，並且（在這種情況下，菜單的）布局不會中斷。

話雖如此，您的鏈接中也應該包含文本 ，並使用某種圖像替換技術將鏈接顯示為圖像/圖形。

您的代碼中也有語法錯誤。 您關閉所有錨元素兩次。

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>