• Home
  • Best IT Recipes

    Stretching the <a> tag to fill the entire <li>

    Here is a simple menu structure:

    <ul id="menu"> <li><a href="javascript:;">Home</a></li> <li><a href="javascript:;">Test</a></li> </ul>

    I want the <a> stretch so that it fills all the <li> . I tried using something like width: 100%; height: 100% width: 100%; height: 100% , but this did not affect. How to stretch an anchor tag?

    +48
    html css xhtml
    Jul 16 '10 at 11:33
    source share
    9 answers

    The tag "a" is an element of the built-in level. An inline-level element cannot have its own width. What for? Since the elements of the built-in level are intended to represent a stream of text, which theoretically can be transferred from one line to another. In such cases, it makes no sense to indicate the width of the element, because you do not necessarily know whether it will wrap or not. To set its width, you must change its display property to block or inline-block :

     a.wide { display:block; } ... <ul id="menu"> <li><a class="wide" href="javascript:;">Home</a></li> <li><a class="wide" href="javascript:;">Test</a></li> </ul>

    If memory is used, you can set the width on some built-in level elements in IE6. But this is because IE6 is not implementing CSS properly and wants to embarrass you.

    +103
    Jul 16 '10 at 11:37
    source share

    Just orient A with display:block; :

     ul#menu li a { display: block;}
    +12
    Jul 16 '10 at 11:48
    source share
     display:flex

    is an HTML5 way.

    See Fiddle

    It is useful to hack the buttons of the framework or any other element, but you may need to first remove their filling and set them to the desired height.

    In this case, the tabs are angular material that seems complicated to make them work as a “standard” website.

    Note that the pointer changes as soon as you enter the tab: <a> are now stretched to fit their parent sizes.

    Off-topic, notice how the flawless angular material displays the ripple effect even on a "large surface."

     .md-header{ /* THIS IS A CUSTOM HEIGHT */ height: 50vh !important; /* '!important' IS JSFIDDLE SPECIFIC */ } md-tab{ padding: 0 !important; /* '!important' IS JSFIDDLE SPECIFIC */ } a{ display: flex; align-items: center; justify-content: center; height: 100%; }
    +6
    Apr 08 '15 at 20:21
    source share

    Another approach:

     <ul> <li> <a></a> <img> <morestuff>TEXTEXTEXT</morestuff> </li> </ul> a { position: absolute; top: 0; left: 0; z-index: [higher than anything else inside parent] width:100%; height: 100%; }

    This is useful if the link container also has images and such inside it or has potentially different sizes depending on the size of the image / content. At the same time, the anchor tag itself may be empty, and you can arrange other elements inside the anchor container, but you want to. The anchor will always match the size of the parent and will be on top to make everything li available.

    +2
    Oct 19 '14 at 21:54
    source share
     <!doctype html> <html> <head> <style type="text/css"> #wide li a { display:block; } </style> </head> <body> <ul id="menu"> <li><a href="javascript:;">Home</a></li> <li><a href="javascript:;">Test</a></li> </ul> </body> </html>

    You should try to avoid using a class on every tag so that your content remains easy to maintain.

    0
    Sep 13
    source share

    I used this code to fill the width and height 100%

    HTML

     <ul> <li> <a>I need to fill 100% width and height!</a> </li> <ul>

    CSS

     li a { display: block; height: 100%; /* Missing from other answers */ }
    0
    Dec 04 '14 at 20:43
    source share

    Use height string and indent text instead of padding for the li element and use display: block; for anchor tag

    0
    Jul 27 '16 at 12:13
    source share

    I need this functionality only in the form of tabs, below 720px, so in the media request I did:

     @media(max-width:720px){ a{ display:block; width:100%; } }
    0
    Jul 24 '17 at 10:28
    source share

    If your <li> should have a certain height, your <a> will stretch more to the width of the <li> rather than the height. One way to solve this problem is to use CSS display:block and add paddings to my <a> s OR wrap <a> around <li> s

     <ul id="menu"> <a href="javascript:;"><li>Home</li></a> <a href="javascript:;"><li>Test</li></a> </ul>
    -2
    Mar 19 '14 at 10:43
    source share


    More articles:


    All Articles