CODEWITHSUNDEEP
jqueryhtmlcss
ONYX
ONYX

Reputation: 5859

hyperlink inside li element

is there a way to stretch the hyplerlink element to the size of a li element inside

<ul>
    <li><a href="#">this link to fill up the li element width and height</a><li>
</ul>

Upvotes: 3

Views: 981

Answers (3)

Damb
Damb

Reputation: 14600

Sure

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

Upvotes: 3

DouglasMarken
DouglasMarken

Reputation: 324

a {display: block; width: 100%;}

This should do it.

Upvotes: 8

Ben
Ben

Reputation: 57207

Yes. Apply display:block;width:100% to the element's CSS.

Example:

HTML

<ul>
  <li><a href='#'>Link 1</a></li>
  <li><a href='#'>Link 2</a></li>
  <li><a href='#'>Link 3</a></li>
</ul>

CSS (using selectors - a little trickier but fun)

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

The <a> tag is an inline element, which means that its width can't be styled (and also several other properties). So, the display needs to be changed to block.

Upvotes: 3

Related Questions