Clicable <li> with <a> inside it and HTML tags for contact information-CodePudding

I want the entire li element to be clickable not just the phone, could it be possible?

Also, are the HTML tags being used correctly for a contact information?

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 >
          <a href="12345"><img src="./img/phone.svg"  /><span>Phone</span>
            <p> 1 (234) 567-89-00</p>
          </a>
        </li>
        <li >
          <a href="email@email"><img src="./img/email.svg" /><span>Email</span>
            <p>email@email</p>
          </a>
        </li>
        <li >
          <a href="my streeet"><img src="./img/address.svg"/><span>Address</span>
            <p>street</p>
          </a>
        </li>
      </ul>
    </address>

Thank you!!

CodePudding user response：

You can either set your styles to

a {
  display: block;
  height: 100%
}

li {
  display: flex;
}

CodePudding user response：

You should put the end the a tag after the img

<address>
      <ul>
        <li >
          <a href="12345"><img src="./img/phone.svg"  /></a><span>Phone</span>
            <p> 1 (234) 567-89-00</p>
          
        </li>
        <li >
          <a href="email@email"><img src="./img/email.svg" /></a><span>Email</span>
            <p>email@email</p>
          
        </li>
        <li >
          <a href="my streeet"><img src="./img/address.svg"/></a><span>Address</span>
            <p>street</p>
        </li>
      </ul>
    </address>

Or you can delete the a tag. The image works without it, but the img won't be clickable

CodePudding user response：

A li is by default not clickable. You can solve this issue by either using javascript or by adding height: 100%; and display: block; to your a.

CodePudding user response：

Just give a tag 100% width and height and it will occupy all the space of li and li will become clickable another way of doing this is that just remove li and and insert a tag directly.

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 >
          <a href="12345"><img src="./img/phone.svg"  /><span>Phone</span>
            <p> 1 (234) 567-89-00</p>
          </a>
        </li>
        <li >
          <a href="email@email"><img src="./img/email.svg" /><span>Email</span>
            <p>email@email</p>
          </a>
        </li>
        <li >
          <a href="my streeet"><img src="./img/address.svg"/><span>Address</span>
            <p>street</p>
          </a>
        </li>
      </ul>
    </address>

CodePudding user response：

This was already answered here

Here is the answer for those who don't want to look there

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

The list element supports a onclick event.

for your case just remove the <a> element and replace it with a text-node or a <p>