图像填补了Safari手机上的整个空间
图像填补了Safari手机上的整个空间
提问于 2021-03-11 14:16:43
因此，我的网站导航栏在安卓和iOS手机、在Chrome/Android上看上去很好上显示不同，但出于某种原因，汉堡包图标被伸展开来，覆盖了Safari/iOS的整个页面。。
我使用TailwindCSS，下面是我的代码：
<nav className="fixed sticky top-0 z-10 flex gap-2 p-2 bg-white cursor-pointer md:pl-4">
<img
onClick={toggleOpen}
src="/hamburger-menu-red.png" className="w-10" alt="menu"
/>
{props.showLogo && (
<Link to="/">
<img
src="/cooken-logo.png" alt="cooken-logo" className="w-20 cursor-pointer" />
</Link>
)}
</nav>是因为我没有指定汉堡包图标的高度，还是因为与Safari的兼容性问题？任何帮助都将不胜感激。
基于赛斯输入的更新
<nav className="fixed sticky top-0 z-10 flex items-center h-12 gap-2 p-2 bg-white md:pl-4">
<button
onClick={toggleOpen}
>
<img
src="/hamburger-menu-red.png" className="w-10 h-8" alt="menu"
/>
</button>
{props.showLogo && (
<Link to="/">
<img
src="/cooken-logo.png" alt="cooken-logo" className="w-16 h-8"
/>
</Link>
)}
</nav>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-11 16:11:15
因为它是flex项的子元素，而flex项的默认对齐项属性是拉伸属性。
但是，在您的代码中还有其他更多的问题，它是无效的。一个汉堡包的图片或一个网站的标志都不是合理的导航项目。nav元素应该包含指向站点页面的导航链接。
不应将单击事件附加到图像。图像元素只是用来显示图像，而不是其他。如果它去了某个地方，使用一个链接，如果它做了什么，使用一个按钮元素。
您不需要在链接上放置游标，它们已经有了；图像没有，因为它们不是交互式元素。
我建议最好的方法是使用按钮元素(它已经包含了内置的点击行为)来显示链接列表(链接是内置的链接行为)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66584324
复制相关文章
相似问题
腾讯云开发者
