随机<a>&#39;s created in unordered list </a> <ul> <a>

Question

I have an < ul> list for a top menu bar which works fine, all the links are just text. However, I've recently tried to add two < li> items with an < img> tag inside them.

When a browser loads the page it creates random empty < a> tags in between the items which causes a gap. I've never seen this before.

<nav class="main-nav">
    <ul>
        <li><a href="*****.php">Home</a></li>       
        <li><a href="*****.php">*****</a></li> 
        <li><a href="*****.php">*****</a></li>
        <li><a href="*****.php">*****</a></li>
        <li><a href="*****.php">*****</a></li>
        <li><a href="*****.php">*****</a></li>
        <li><a href="*****.php">*****</a></li>
        <li><a href="*****.php">*****</a></li> 
        <li><a href="*****.php">*****</a></li>
        <li><a href="http://m.me/*****"><img style="max-width:50px;" src="/img/logo/fb1.png"><a/></li>
        <li><a href="https://www.tripadvisor.co.uk/*****"> <img style="max-width:60px;" src="/img/logo/trip.png"><a/></li>     
   </ul>    
</nav>

Here is the picture

Picture

Answer 1

用这一个代替最后2 li

<li><a href="http://m.me/*****"><img style="max-width:50px;" src="/img/logo/fb1.png"></a></li>
<li><a href="https://www.tripadvisor.co.uk/*****"> <img style="max-width:60px;" src="/img/logo/trip.png"> </a> </li>  

您使用的是<a/>而不是引起问题的</a>