CODEWITHSUNDEEP
html
Miguel Machado
Miguel Machado

Reputation: 298

Link tag inside list item?

My problem is: I have a <a> tag inside an <li> and the list have css styling to look like a button, but using like this:

<a href="#"><li>page</li></a>

It isn't correct. How shoud i do? Is there any way that if I click in every place in the <li> the link will be triggered?

Upvotes: 5

Views: 17136

Answers (3)

lulubytt
lulubytt

Reputation: 41

You say you have an <a> inside a <li> but in your code snippet its the other way around. Its not valid or semantic html to have an <a> tag be the parent of a list item li.

In any case though, you need to have the <a> be display:block

Upvotes: 4

emmanuel
emmanuel

Reputation: 9615

<a> elements are by default inline positioned. You should change the display property to block to occupy the entire space of its parent.

ul {
  list-style-type: none;
}
li {
  background: blue;
  width: 100px;
}
li a {
  background: orange;
  display: block;
}
<ul>
  <li><a href="#">page</a>
  </li>
</ul>

Upvotes: 3

Igor
Igor

Reputation: 33993

Assuming you have a ol or ul as the parent, you cannot have an a tag as a direct child. Try flipping the two, and then playing with your CSS to get the width as you need it:

<li><a href="#">page</a></li>

Upvotes: 5

Related Questions