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

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

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

请帮我解决这个问题。

最佳答案

指针1

将锚放置在<li>标记中

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

和这个风格

指针2

在CSS脚本的底部，您的栏中有填充，这就是为什么锚点没有占据容器中的所有空间的原因

这就是你所拥有的

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

取出padding: 10px 15px;

像这样设置锚标签

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

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

这是小提琴https://jsfiddle.net/repzeroworld/pypqkfpu/

关于html - 只能在文本的上半部分单击按钮/超链接，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34504763/