一个<a>标签</a> <a><img></a> <a>内部标记不同于</a> <a>标记只有文本。</a> <a>我怎样才能解决这个问题？</a>

Question

I am working on a website, and I am trying to make a top navigation bar. The far left link should be an image with my logo, and the other ones should navigate to different parts of the site. The button with the image lines up differently that the other ones. How can I fix that?

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

Thanks in advance!

Answer 1

What about 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> 

In the example above, all flex children will have the same height regardless of their content.

Answer 2

Remember, images are inline elements and so they are affected by line height. Try setting your image to diasplay block or inline-block. I see you have it on the link— move it to the image.