我希望整个li元素都可以点击,而不仅仅是phone,这可能吗?
另外,联系人信息是否正确使用了HTML标记?
ul {
display: flex;
text-align: center;
justify-content: center;
list-style: none;
padding-left: 0;
}
li {
width: 400px;
border: 1px solid red;
}
li a {
position: relative;
width: inherit;
border: 1px solid green;
}
<address>
<ul>
<li class="">
<a href="12345"><img src="./img/phone.svg" /><span>Phone</span>
<p>+1 (234) 567-89-00</p>
</a>
</li>
<li class="">
<a href="email@email"><img src="./img/email.svg" /><span>Email</span>
<p>email@email</p>
</a>
</li>
<li class="">
<a href="my streeet"><img src="./img/address.svg"/><span>Address</span>
<p>street</p>
</a>
</li>
</ul>
</address>
谢谢你!
5条答案
按热度按时间8iwquhpp1#
您可以将样式设置为
或
ruarlubt2#
你应该把a标签放在img后面
或者你可以删除a标签,没有a标签图片也能正常工作,但是img就不能被点击了
deikduxw3#
默认情况下,
li
不可单击。您可以使用javascript或将height: 100%;
和display: block;
添加到a
来解决此问题。rdrgkggo4#
只要给予
a
标签100%的宽度和高度,它将占据li
的所有空间,li将成为可点击的,另一种方法是,只要删除li
和直接插入一个标签。ui7jx7zq5#
此问题已得到答复here
对于那些不想去那里看的人,这里有答案
list元素支持onclick事件。
对于您的情况,只需删除
<a>
元素并将其替换为文本节点或<p>