一個<a>標簽</a> <a><img></a> <a>內部標記不同於</a> <a>標記只有文本。</a> <a>我怎樣才能解決這個問題？</a>

Question

我正在一個網站上工作，我正在嘗試制作一個頂部導航欄。 最左邊的鏈接應該是帶有我的徽標的圖像，其他的應該導航到網站的不同部分。 帶有圖像的按鈕與其他按鈕的排列方式不同。 我該如何解決這個問題？

 <div id='topbar'> <a href='index.html' class='topbar-button-home'> <img src='camelCaseCo_centered_cropped_notext_bold_small.png'> </a> <a href='index.html' class='topbar-button'>Home</a> <a href='index.html' class='topbar-button'>2</a> <a href='index.html' class='topbar-button'>3</a> <a href='index.html' class='topbar-button'>4</a> </div> <style> #topbar { padding: 0; margin: 0; display: inline-block; font-size: 0; } .topbar-button { width: 200px; margin: 0px; padding: 20px; display: inline-block; border: solid black 1px; border-radius: 0px; text-decoration: none; color: black; text-align: center; font-family: "Google Sans", sans-serif; font-size: 14px; } .topbar-button-home { width: 50px; margin: 0px; padding: 8px; border: solid black 1px; display: inline-block; text-decoration: none; color: black; text-align: center; font-family: "Google Sans", sans-serif; font-size: 14px; } </style> 

提前致謝！

Answer 1

那么Flexbox呢？

 #topbar { padding: 0; margin: 0; display: flex; } .topbar-button { width: 200px; margin: 0px; padding: 20px; display: inline-block; border: solid black 1px; border-radius: 0px; text-decoration: none; color: black; text-align: center; font-family: "Google Sans", sans-serif; font-size: 14px; } .topbar-button-home { width: 50px; margin: 0px; padding: 8px; border: solid black 1px; display: inline-block; text-decoration: none; color: black; text-align: center; font-family: "Google Sans", sans-serif; font-size: 14px; } 

 <div id='topbar'> <a href='index.html' class='topbar-button-home'><img src='camelCaseCo_centered_cropped_notext_bold_small.png'></a> <a href='index.html' class='topbar-button'>Home</a> <a href='index.html' class='topbar-button'>2</a> <a href='index.html' class='topbar-button'>3</a> <a href='index.html' class='topbar-button'>4</a> <a href='index.html' class='topbar-button'><img src='camelCaseCo_centered_cropped_notext_bold_small.png'></a> </div> 

在上面的示例中，無論內容如何，​​所有彈性子級都將具有相同的高度。

Answer 2

請記住，圖像是內聯元素，因此它們受行高影響。 嘗試將圖像設置為diasplay塊或內聯塊。 我看到你在鏈接上有它 - 將它移動到圖像上。