我正在尝试获取页面导航栏的图像,以链接回网站的首页。我尝试使用下面的代码,但是由于某些原因,只有图像的顶部是可单击的。我已经对其进行了检查并尝试了很长时间,但找不到任何看起来不合适或语法错误的内容。
有什么我可以解决的问题吗?
nav {
height: 85px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background: none;
padding-left: 60px;
padding-right: 60px;
user-select: none;
transition: 0.5s ease-in-out;
z-index: 100;
}
nav img {
height: 70px;
margin-top: 5px;
}
nav a:hover {
color: var(--primary) !important;
transition: 0.15s;
}
nav img {
margin: 0px;
}
nav .responsive-nav {
display: none;
}
nav .right {
position: fixed;
top: 27px;
right: 60px;
width: 100%;
text-align: right;
height: 85px;
text-transform: uppercase;
}
nav .right ul {
position: fixed;
top: 27px;
right: 60px;
width: 100%;
height: 85px;
margin-top: 0px;
}
nav .right li {
margin-top: 7px;
}
nav .right a {
text-decoration: none;
color: #ffffff;
font-size: 16px;
margin-left: 20px;
}
nav h1 a {
text-decoration: none;
color: #ffffff;
transition: 0.15s;
}
nav h1 a:hover {
color: var(--primary);
transition: 0.15s;
}
nav .menu {
display: none;
position: fixed;
top: 18px;
right: 30px;
font-size: 25px;
border: 2px solid var(--primary);
border-radius: 5px;
padding: 5px;
color: var(--primary);
cursor: pointer;
}
<nav>
<a href="/"><img src="https://www.gsr-technology.co.uk/wp-content/uploads/2015/10/partner-logo-placeholder.jpg" /></a>
<div class="right">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/services.html">Services</a></li>
</ul>
</div>
<i class="fas fa-bars menu"></i>
</nav>
答案 0 :(得分:4)
在上面的代码nav .right
和nav .right ul
中,宽度均为100%;删除它,然后尝试完成,整个图片将可以点击。