6

私はこのような構造を持っています

  <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内部に配置できません。どうすればこれを修正できますか。ablocka

ここにフィドルがあります
http://jsfiddle.net/qry45/2/
http://jsfiddle.net/qry45/4/

4

3 に答える 3

10

CSSで次のようなもの：

.myClass li a {
    width: 100%;
}

HTML5 doctype を使用している場合、ブロック要素をインライン要素 ( <a>、など) 内に配置でき、要素に次のように設定する場合:<span>display: block;<a>

.myClass li a {
    display: block;
}
于 2013-02-21T05:14:41.270 に答える
5

よくわかりませんが、width:inherit;すべての内側の a に適用すると機能します

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

li a {
    position: relative;
    width: inherit;
    border: 1px solid green;
}
于 2013-02-21T05:18:43.850 に答える