html - 如何将 li 内 anchor 标记的宽度增加到 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 中. 我该如何解决这个问题。

这是一个 fiddle
http://jsfiddle.net/qry45/2/
http://jsfiddle.net/qry45/4/

Answer 1

在你的 CSS 中是这样的:

.myClass li a {
    width: 100%;
}

block 元素可以放在行内元素(<a>、<span> 等)中，如果您使用的是 HTML5 文档类型，并且如果您设置了 display: block;在 <a> 上元素:

.myClass li a {
    display: block;
}