How to increase width of anchor tag inside li to li width

css, html

Solution

I´m not sure but if you apply `width:inherit;` to all inner a, it works

li {
    width: 400px;
    border: 1px solid red;
}

li a {
    position: relative;
    width: inherit;
    border: 1px solid green;
}

Problem

I have structure like this ``` <div class='myClass'> <ul> <li> <a href="myfile.html">My link</a> </li> </ul> </div> ``` My `li` has a fixed with. But `a` text is not always equal to `li` width So the click able area is less than `li`. I tried to fix it by increasing the width of the `a` but it is not working. How can I achieve it. I am using the following `css` ``` .tooltipinner ul { list-style-type: none; margin: 0; overflow-y: auto; padding: 0; width: 305px; } .tooltipinner ul li { background-color: #BBAEA5; background-image: url("../../Images/UIFiles/Menu/SubmenuBg.jpg"); background-position: left top; background-repeat: repeat-x; border-top: 1px solid #C1BFBD; color: #FFFFFF; cursor: pointer; float: left; font-size: 12px; padding-bottom: 4px; padding-left: 5px; padding-top: 4px; width: 199px; } .tooltipinner ul li:hover { background-color: #BBAEA5; background-image: url("../../Images/UIFiles/Menu/SubmenuBgHover.jpg"); background-position: left bottom; background-repeat: repeat-x; border-top: 1px solid #C1BFBD; cursor: pointer; float: left; padding-left: 5px; } .tooltipinner ul li a { color: #000000; font-size: 12px; font-weight: 400; text-decoration: none; } .tooltipinner ul li a:link { color: #000000; min-width: 200px; text-decoration: none; } ``` I was also trying to put a `div` inside `a` but `block` element can not be placed inside `a`. How can I fixed this. Here is a fiddle http://jsfiddle.net/qry45/2/ http://jsfiddle.net/qry45/4/

Original source