html - 只能在文本的上半部分单击按钮/超链接

Question

如果我将鼠标悬停在底部的文本/按钮上，我将无法单击它。我不知道是什么导致了这个问题。这是代码:

<div class="container">
<ol class="breadcrumb">
    <li ng-repeat="crumb in breadcrumbs" ng-class="{ active: $last }"><a
            ui-sref="{{ crumb.route }}" ng-if="!$last"
            ng-mouseover="true"
            translate>{{ crumb.displayName }}&nbsp;</a><span ng-show="$last" translate>{{ crumb.displayName
            }}</span></li>
</ol>

请帮我解决这个问题。

Answer 1

指针 1

把你的 anchor 放在 <li> 中标签

    <li> <a ui-sref="findeventshome.findevents" translate class="eventsLink">LOGIN_PERSON_OWN_EVENTS</a></li>

和风格

指针 2

在你的 css 脚本的底部，你的栏中有填充，这就是为什么你的 anchor 没有占据容器中的所有空间

这就是你拥有的

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

取出padding: 10px 15px;

像这样设计你的 anchor 标签

  a:active,a:hover {
  cursor: pointer;
  overflow: hidden; 
  display: inline-block;
  width:auto;

        }
  li {
  display:inline-block;
  padding:0;
  margin:none;
   }

这是 fiddle https://jsfiddle.net/repzeroworld/pypqkfpu/