html - <a> inside <li> 的 border-bottom 和 hover 的样式显示

Question

这是我的三 View ，我想要 border-bottom不只是为了 <a>文本，但对于树周围的所有边框和 hover 相同background-color .这是每个 li 的 html 代码
html

<li ng-repeat="node in node.children" class="treebase"
        ng-include="'/_Core/DirectiveCore/Tree/NodeTemplate.html'" ng-show="node.isVisible">
        <a ng-click="c.nodeClicked($event , node)" class="treebase ">
            <span ng-class="node.currentCssClass" href="node.link"></span>
            {{node.text}}
        </a>
</li>

CSS

ul li a {
    border-bottom: 1px solid #eeeeee;
}

ul li a.treebase:hover {
    text-decoration: none /*!important;*/ ;
    cursor: pointer;
    background-color: #eeeeee;
    display: block;
}

树

Answer 1

如果您希望它占据整个宽度，您可以将边框放在 li 元素上，因为 li 元素是一个 block 。

或者您可以简单地将 a 更改为显示为 block :

ul li a {
    border-bottom: 1px solid #eeeeee;
    display: block;
}

如果 a 显示为 block ，它将在 li 标签内占据整个宽度。因此，边框和背景将采用 li 的宽度。