Как увеличить ширину тега привязки внутри литий шириной Li

Question

У меня есть структура как этот

<div class='myClass'> 
    <ul> 
      <li> 
       <a href="myfile.html">My link</a> 
      </li> 
    </ul> 
    </div> 

Мой li имеет фиксированную с.
Но a текст не всегда равен li ширина
Таким образом, область с возможностью нажатия меньше li.
Я попытался исправить это, увеличив ширину a, но он не работает.
Как я могу это достичь.
Я использую следующий 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; 
} 

Я также пытался поставить div внутри a но block элемент не может быть размещен внутри a. Как это можно исправить.

Вот скрипку
http://jsfiddle.net/qry45/2/
http://jsfiddle.net/qry45/4/

Answer 1

I'm не уверен, но если применить width:inherit; ко всем внутренним а, она работает

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

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

Answer 2

Что-то вроде этого в вашем CSS:

.myClass li a { 
    width: 100%; 
} 

Блочные элементы могут быть размещены внутри встроенных элементов (<a>, <span> и т.д.), если вы используя метод HTML5, и если вы установили display: block; на элемент <a>:

.myClass li a { 
    display: block; 
}