内部<li>和<a>联系信息的HTML标签

Question

我希望整个li元素都是可点击的，而不仅仅是手机，这可能吗?

另外，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>[phone]</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>

谢谢! !

Answer 1

你可以将你的样式设置为

a {
display: block;
height: 100%
}

或

li {
display: flex;
}

Answer 2

你应该把a标签放在img

之后

<address>
<ul>
<li class="">
<a href="12345"><img src="./img/phone.svg"  /></a><span>Phone</span>
<p>[phone]</p>

</li>
<li class="">
<a href="email@email"><img src="./img/email.svg" /></a><span>Email</span>
<p>email@email</p>

</li>
<li class="">
<a href="my streeet"><img src="./img/address.svg"/></a><span>Address</span>
<p>street</p>
</li>
</ul>
</address>

或者您可以删除a标记。没有它，图像也可以工作，但img将无法点击

Answer 3

默认情况下，li不可点击。您可以通过使用javascript或将height: 100%;和display: block;添加到a来解决此问题。

Answer 4

给a标签100%的宽度和高度，它将占据li的所有空间，li将成为可点击的另一种方法是删除li并直接插入标签。

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;
display: block; 
width: 100%;
height: 100%;
border: 1px solid green;
}

<address>
<ul>
<li class="">
<a href="12345"><img src="./img/phone.svg"  /><span>Phone</span>
<p>[phone]</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>

Answer 5

li > a { display:block; height: 100%; width: 100%; } 

这个应该能行

Answer 6

这里已经有答案了

这是给那些不想看那里的人的答案

<li onclick="location.href = '';">Make A List Item Clickable</li>

list元素支持onclick事件。

只需删除<a>元素并将其替换为文本节点或<p>