html - 超链接集合元素
问题描述
当我尝试超链接下面的代码时,它似乎弄乱了图像的包装,并且只链接了图标而不是整个 flex 容器。我尝试过尝试<span>
元素,但没有任何成功。
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
transition: opacity .2s ease-in-out;
flex-wrap: nowrap
}
.flex-item {
text-align: center;
text-decoration: none;
color: #ffffff;
font-family: verdana;
width: 100%;
display: flex;
flex-shrink: 1;
justify-content: center;
align-items: center;
font-size: calc(8px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
z-index: 10;
flex-wrap: nowrap
}
.flex-item:before {
content: '';
float: left;
padding-top: 100%;
}
.red-box {
background: #fd6f71;
transition: opacity .2s ease-in-out;
opacity: 1;
}
<div class="flex-container">
<div class="red-box flex-item">
<div class="lh-icon"><img src="https://i.imgur.com/NCp8Sst.png"></div>
<a>Placeholder</a>
</div>
</div>
代码笔:
解决方案
由于<a>
元素不能包含<a>
子元素,因此用 .flex-container 包裹整个容器<a>
会失败。只需将占位符的标签从 更改<a>
为<span>
。
<a href="http://yourlinkhere.com">
<div class="flex-container">
<div class="red-box flex-item">
<div class="lh-icon"><img src="https://i.imgur.com/IyLYxCc.png"></div>
<span>Placeholder</span>
</div>
</div>
</a>
希望这有帮助:D
推荐阅读
- r - 查找不在字符串开头的子字符串
- r - R嵌套的for循环仅产生数据框中最后一列的结果
- c++ - 将具有非 void 返回类型的 lambda 转换为函数指针
- cron - 如何将时间戳添加到 cron 作业输出?
- reactjs - 反应多模式使用导入文件
- c++ - 模板参数是模棱两可的/推断的参数冲突类型
- android - 在 shrinkResources 之后 GeoNames 和 JDOM 请求 java.rmi.RemoteException
- arrays - 为什么我不能将我的自定义对象附加到数组?
- python - 在 mac osx 10.15.2 上安装 Psycopg2
- python - 使用 Python 问题发布到谷歌表单