1

さまざまなサイズのリスト ブロックを使用したい。

JSFiddle の「結果」セクションでは、ユーザーがブロックの上部 (テキストがある場所) にカーソルを合わせた場合にのみ、「作業中」リスト エントリを選択できます。ユーザーがテキストの下にカーソルを合わせると、機能しません。ユーザーがこのブロックの任意の部分にカーソルを合わせられるようにします。

ここにコードを配置しました

JSFiddle http://jsfiddle.net/susan/5kDHS/3/

あなたが提供できるどんな助けも大歓迎です。
ありがとう、スーザン。

<div id="mainblock"><b>My Day</b>
    <ul id="blocks">
        <li id="timework"><a href="http://www.google.com">Working 75% </a>
        </li>
        <li id="timeplay"><a href="http://espn.go.com/">Playing 25%</a>
        </li>
    </ul>
</div>
4

3 に答える 3

1

アンカーのパディングを維持したい場合は、CSS 計算を使用してみてください。

#blocks li a
{
    background-color: #CCCCCC;
    border-bottom: 1px solid #AAAAAA;
    color: #333333;
    display: block;
    padding: 10px;
    height: calc(100% - 20px); /* <----- added this */
    text-align: left;
    text-decoration: none;
}

これにより、アンカーがコンテナーを満たすことができますが、パディングの量も差し引かれます。単純に「height: 100%;」を使用すると、パディングにより、アンカーがコンテナーを超えていることがわかります。

更新された Fiddle (Chrome でのみテスト済み)

これ以外に、必要なパディングを作成するために、アンカー項目内に追加のスパンが必要になる場合があります。

于 2013-05-10T19:54:31.670 に答える
1

これを試して

#blocks li a
{
    .......
    height: 100%;
}

http://jsfiddle.net/5kDHS/8/

アンカー タグの高さを親の 100% に等しくしました。

于 2013-05-10T19:51:09.960 に答える