Make follows
parent width

Question

I have some <a> wrapped in a <li>, I want to make width of each <a> follows width of <li> which is same for each <li> so all the area of every <li> (area of <a> too) is clickable.

I set width : 100% in <a> then set specific width for <li> but didn't work. How can it be done?

Please Help. Thank you very much

This is my code :

HTML :

<ul class='sidenav'>
<?php   
  foreach ($menu as $key => $value) 
  {
  echo "<li> <a href=".$value[2].".php>".$value[1]."</a> </li>";
  }
?>
</ul>

CSS :

#sidenav li{
  border     : 1px solid red;
  padding    : 10px 10px 10px 0px;
  margin-top : 10px;
  width      : 250px;
}

#sidenav li a{
  border  : 1px solid green;
  padding : 10px 10px 10px 10px;
  width   : 100%;
}

this is the result

can you post the HTML or the fiddle please – Anjula Ranasinghe Mar 15 '15 at 05:08 — Anjula Ranasinghe, Mar 15 '15 at 05:08

Piotr Dajlido · Accepted Answer · 2015-03-15T06:13:39.587

2

Make use of display:block property in li a

Here is your code in action https://jsfiddle.net/sw556vrv/3/

#sidenav li{
  border     : 1px solid red;
  margin-top : 10px;
  width      : 250px;
  height     : 100px;
}

#sidenav li a{
  border  : 1px solid green;
  margin: 0px auto;  
  display:block; // <-- read about this property
  width   : 100%; // <-- 100% or parent
  height : 100%;
}

edited Mar 15 '15 at 06:13

answered Mar 15 '15 at 05:14

Piotr Dajlido

1,982
15
28

Thanks, bro! I read about block property, it says that "A block-level element starts on a new line and stretches out to the left and right as far as it can." So that's why the reason when I set `` property to block, the stretches out to fit its
parent. Great, thanks again!

januaryananda

Mar 15 '15 at 06:13

balajisoundar · Answer 2 · 2015-03-15T05:26:56.757

1

a tag is by default inline element.setting width of inline element wont work.so change your a's display style property to inline-block or block.

#sidenav li a{
   border  : 1px solid green;
   padding : 10px 10px 10px 10px;
   width   : 100%;
   display:inline-block;
 }

edited Mar 15 '15 at 05:26

answered Mar 15 '15 at 05:16

balajisoundar

581
2
11

thanks, bro! Yes, I've just read about display properties. Block display will stretch out to left and right as far as it can, so in my case the block-setting will strech to fit its
parent. Thanks again

januaryananda

Mar 15 '15 at 06:16

score 0 · Answer 3 · edited May 23 '17 at 12:22

0

Look at How to make a whole 'div' clickable in html and css without javascript?

That is essentially the same issue solved with a div.

edited May 23 '17 at 12:22

Community

1
1

answered Mar 15 '15 at 05:10

Norbert

6,026
3
17
40

Yes, thanks man! It can be solved just by setting to have block display property. Thanks again – januaryananda Mar 15 '15 at 06:17

score 0 · Answer 4 · answered Mar 15 '15 at 08:32

Problem is in you have <ul class="sidenav"> but in css you have written sidenav as identificator (id).

So, change

#sidenav li{
  border     : 1px solid red;
  padding    : 10px 10px 10px 0px;
  margin-top : 10px;
  width      : 250px;
}

#sidenav li a{
  border  : 1px solid green;
  padding : 10px 10px 10px 10px;
  width   : 100%;
}

on

.sidenav li{
  border     : 1px solid red;
  padding    : 10px 10px 10px 0px;
  margin-top : 10px;
  width      : 250px;
}

.sidenav li a{
  border  : 1px solid green;
  padding : 10px 10px 10px 10px;
  width   : 100%;
}

or <ul class="sidenav"> to <ul id="sidenav">.

And then you may make changes recommended in other answers, if anchor tag will not take all width of parent tag (li) ... mostly change of display on block, as user Urahara says.

Make follows parent width

4 Answers4

Make follows
parent width