Wrap Anchor Tag Around Li Element

wrap anchor tag around li element

The only legal element allowed inside a <ul> is an <li>. You cannot have an anchor wrapped around the <li>. This holds true in HTML5, where an anchor can wrap around other block level elements.

What you have in CSS is nearly there, just add:

a {
     text-decoration: none;
     display: block;
     width: 100%;
     height: 100%;
}

And your anchor shall fill the entire space of the <li>.

---

Update for 2022: wrapping your li tags with anchors is now totally acceptable.

Can wrapping a div or an anchor tag around a <LI> still be considered valid html structure

No, it is not valid, though it often works.

Yes, the reason most people do like this is to make it clickable.

There is many ways to make any element besides an anchor clickable, where wrapping an anchor around it is the most used.

This is valid for all non block level elements, but will likely work on all element level types because of event bubbling.

For block level elements (can also be used on inline elements), one can do like this, to make the whole element clickable

HTML

<div class="clickable"><a href='....'></a></div>

CSS

.clickable a {
  display: inline-block; height: 100%; width: 100%;   /*  fill the parent  */
}

---

An alternative when one just can't use an anchor and still need it clickable, would be by using a click handler, like this, using jQuery.

$( "li" ).click(function() {
  // Do something here on click
});

Link to wrap around li with padding

You can use the hover the li instead of the a to correct the background-color applied on hover by using:

li:hover a {
  display: block;
}
li:hover {
  background-color: rgb(245, 245, 245);
}

instead of:

a:hover { 
  display:block; 
  background-color:rgb(245,245,245);
}

See demo below:

ul li {  float: left;  line-height: 5em;  padding: 0 2em;}a:link {  display: block;}a:visited {  display: block;}li:hover a {  display: block;}li:hover {  background-color: rgb(245, 245, 245);}a:active {  display: block;  background-color: rgb(245, 245, 245);}

<ul>  <li><a href="1.html">Item 1</a>  </li>  <li><a href="2.html">Item 2</a>  </li>  <li>Item 3</li>  <li>Item 4</li>  <li><a href="5.html">Item 5</a>  </li></ul>

How to wrap anchor link around shape in css

Assign the CSS you have to the link itself, not to the container. Please see example below.

a {  height: 3rem;  width: 3rem;  border-radius: 50%;  margin: 0 3rem !important;  display: inline-block !important;  cursor: pointer;}
.red {  background-color: red;}
.blue {  background-color: blue;}
.yellow {  background-color: yellow;}
.green {  background-color: green;}
ul {list-style: none;display: flex;width: 50%;}

<ul>  <li>    <a href="#" class="red"></a>  </li>  <li>    <a href="#" class="blue"></a>  </li>  <li>    <a href="#" class="yellow"></a>  </li>  <li>    <a href="#" class="green"></a>  </li></ul>

HTML anchor tag takes entire line

Regular anchor Tags are inline elements. You have to check if in your CSS, you already assign anchors globally to a block element. a { display: block;}

For fast fix:
Wrap your code anchor line (Breadcrumbs) in a container and assign with a unique id or class Name. Then you can assign only for this line the anchors to a inline element.

a {
 display: block;
}
.anchor-regular a {
  display: inline;
}

<a href="">test block </a> <a href="">test block</a>
<div class="anchor-regular">
<a href="">First Link</a> / <a href="">Second Link</a> / <a href="">Third Link</a>
</div>

How do i wrap a <li></li> around each anchor tag dynamically?

$text = str_replace("<a", "<li><a", str_replace('</a>', '</a></li>', $text));

Should do it.

---

Related Topics