How to stretch width of hyperlink (a) tag to full width

Question

I need to fix the width of a tag. It should be aligned with li tag. If li tag has 100 % of width a tag should follow the li with 100% of width.

Please see the code.

li{background:#ff0000; width:100%}
a{background:#ccc; width:100%}

<ul class="parent-sidebar-menu">
 <li class="page_item page-item-12 current_page_ancestor current_page_parent has_children">
  <a href="http://localhost/html5beta/html5/">HTML5</a>
  <ul class="child-sidebar-menu">
   <li class="page_item page-item-62 current_page_item">
    <a href="http://localhost/html5beta/html5/html5-tutorial/" aria-current="page">HTML5 Tutorial</a>
   </li>
   <li class="page_item page-item-64"><a href="http://localhost/html5beta/html5/html-tutorial/">HTML Tutorial</a></li>
   <li class="page_item page-item-66"><a href="http://localhost/html5beta/html5/html-forms/">HTML Forms</a></li>
   <li class="page_item page-item-68"><a href="http://localhost/html5beta/html5/html-graphics/">HTML Graphics</a></li>
   <li class="page_item page-item-70"><a href="http://localhost/html5beta/html5/html-apis/">HTML APIs</a></li>
   <li class="page_item page-item-72"><a href="http://localhost/html5beta/html5/html-example/">HTML Example</a></li>
   <li class="page_item page-item-74"><a href="http://localhost/html5beta/html5/html-references/">HTML References</a></li>
  </ul>
 </li>
</ul>

score 1 · Accepted Answer · answered Jun 26 '19 at 08:57

Try adding display:block to your li and a otherwise width: 100% has no effect on inline elements.

li{background:#ff0000; width:100%; display: block}
a{background:#ccc; width:100%; display: block}

<ul class="parent-sidebar-menu">
 <li class="page_item page-item-12 current_page_ancestor current_page_parent has_children">
  <a href="http://localhost/html5beta/html5/">HTML5</a>
  <ul class="child-sidebar-menu">
   <li class="page_item page-item-62 current_page_item">
    <a href="http://localhost/html5beta/html5/html5-tutorial/" aria-current="page">HTML5 Tutorial</a>
   </li>
   <li class="page_item page-item-64"><a href="http://localhost/html5beta/html5/html-tutorial/">HTML Tutorial</a></li>
   <li class="page_item page-item-66"><a href="http://localhost/html5beta/html5/html-forms/">HTML Forms</a></li>
   <li class="page_item page-item-68"><a href="http://localhost/html5beta/html5/html-graphics/">HTML Graphics</a></li>
   <li class="page_item page-item-70"><a href="http://localhost/html5beta/html5/html-apis/">HTML APIs</a></li>
   <li class="page_item page-item-72"><a href="http://localhost/html5beta/html5/html-example/">HTML Example</a></li>
   <li class="page_item page-item-74"><a href="http://localhost/html5beta/html5/html-references/">HTML References</a></li>
  </ul>
 </li>
</ul>

score 0 · Answer 2 · answered Jun 26 '19 at 08:56

Add this CSS display:block for a tag

li{background:#ff0000; width:100%}
a{background:#ccc; width:100%; display:block}

<ul class="parent-sidebar-menu">
 <li class="page_item page-item-12 current_page_ancestor current_page_parent has_children">
  <a href="http://localhost/html5beta/html5/">HTML5</a>
  <ul class="child-sidebar-menu">
   <li class="page_item page-item-62 current_page_item">
    <a href="http://localhost/html5beta/html5/html5-tutorial/" aria-current="page">HTML5 Tutorial</a>
   </li>
   <li class="page_item page-item-64"><a href="http://localhost/html5beta/html5/html-tutorial/">HTML Tutorial</a></li>
   <li class="page_item page-item-66"><a href="http://localhost/html5beta/html5/html-forms/">HTML Forms</a></li>
   <li class="page_item page-item-68"><a href="http://localhost/html5beta/html5/html-graphics/">HTML Graphics</a></li>
   <li class="page_item page-item-70"><a href="http://localhost/html5beta/html5/html-apis/">HTML APIs</a></li>
   <li class="page_item page-item-72"><a href="http://localhost/html5beta/html5/html-example/">HTML Example</a></li>
   <li class="page_item page-item-74"><a href="http://localhost/html5beta/html5/html-references/">HTML References</a></li>
  </ul>
 </li>
</ul>

How to stretch width of hyperlink (a) tag to full width

2 Answers2