[英]An <a> tag with an <img> tag inside lines up differently that an <a> tag with just text. How can I fix this?
我正在一个网站上工作,我正在尝试制作一个顶部导航栏。 最左边的链接应该是带有我的徽标的图像,其他的应该导航到网站的不同部分。 带有图像的按钮与其他按钮的排列方式不同。 我该如何解决这个问题?
<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>
提前致谢!
那么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>
在上面的示例中,无论内容如何,所有弹性子级都将具有相同的高度。
请记住,图像是内联元素,因此它们受行高影响。 尝试将图像设置为diasplay块或内联块。 我看到你在链接上有它 - 将它移动到图像上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.