html - 如何使href内的完整图像可点击
问题描述
简单的问题,我做错了什么,但没有得到这里的问题。我想让图像可以点击,因为它是链接,但这不能正常工作,链接只停留在中间,而不是我想要的完整图像。有人可以帮忙吗?
<div>
<ul class="principaisCategorias">
<li class="itemCategoria">
<div class="imagesItemCategoria">
<a data-bind="ccLink:{route: '/category/ar-condicionado-portatil'}">
<img src="/file/general/imageItemCategoria.jpg" />
</a>
</div>
</li>
</ul>
</div>
这是我的CSS:
div{
display: inline;
font-weight: bold;
text-align: center;
ul{
padding: 0;
margin: 0;
&.principaisCategorias{
width: 102%;
height: 450px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.itemCategoria{
list-style-type: none;
margin-top: 2px;
margin-left: 2%;
margin-bottom: 2px;
margin-right: 2%;
height: 140px;
width: 45%;
background-color: mediumturquoise;
.imagesItemCategoria {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
img, a{
display: block;
width: 100%;
height: 100%;
max-height:100%;
max-width:100%;
}
a{
display: inline-block;
}
}
}
}
}
}
解决方案
当我最初尝试运行代码时,没有应用任何内部样式。这是因为您的 CSS 像 SASS 或 SCSS 一样嵌套。当我重构为普通的 CSS 语法时,它开始工作得更好了。
至于a
链接行为问题,您在该元素上没有href
属性,因此它的行为或多或少类似于<span>
标签。那里还有其他几种不必要的样式。这就是让它按预期运行所需的全部内容:
.imagesItemCategoria a {
display: block;
cursor: pointer;
}
完整代码和工作演示:
.wrapper {
display: inline;
font-weight: bold;
text-align: center;
}
ul.principaisCategorias{
width: 102%;
height: 450px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
padding: 0;
margin: 0;
}
.itemCategoria{
list-style-type: none;
margin-top: 2px;
margin-left: 2%;
margin-bottom: 2px;
margin-right: 2%;
height: 140px;
width: 45%;
background-color: mediumturquoise;
}
.imagesItemCategoria {
width: 100%;
height: 100%;
position: relative;
display: inline-block;
}
.imagesItemCategoria a {
display: block;
cursor: pointer;
}
.imagesItemCategoria img {
width: 100%;
height: auto;
display: block;
}
<div class="wrapper">
<ul class="principaisCategorias">
<li class="itemCategoria">
<div class="imagesItemCategoria">
<a data-bind="ccLink:{route: '/category/ar-condicionado-portatil'}">
<img src="https://picsum.photos/300" />
</a>
</div>
</li>
</ul>
</div>
推荐阅读
- java - 按ID过滤XML文件?
- c - 分配的内存有问题吗
- c++ - 插入新元素后,存储在向量中的结构字段的 C++ 值发生变化
- python - 在python中的选定行(最长子序列)上应用聚合函数
- sapui5 - 如何去掉 UI5-routing 中 URL 中的井号(`#`)?
- powershell - PowerShell Azure 函数 - 使用内部函数
- rust - actix-web 客户端将有效负载作为流处理
- laravel - Composer 错误在 Windows 10 中安装 laravel/installer
- c++ - 表达式必须具有类类型并推送一个类
- python - 在 python 或 reactjs 中使用字典创建文本、值对