Question

我想使用不同大小的列表块。

在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>

Answer 1

试试这个

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

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

我已将锚标记的高度等于其父母的100％

Answer 2

如果要维护锚点的填充，可以尝试使用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％;'你会发现由于填充，锚点超过了它们的容器。

Updated Fiddle（仅在Chrome中测试过）

除此之外，它可能需要在锚点项目内部增加一个跨度来创建所需的填充。

Answer 3

只需将height: 100%;添加到#blocks li a即可。小提琴：http://jsfiddle.net/5kDHS/6/

CSS - 如何让我的list元素填充100％的块

3 个答案: