Question

I have a <a> which is an icon that redirects to a page. This is inside a <button> and the <button> is a collapse button. This <a> icon is inside the button so when I click on it, the menu is uncollapsing and THEN the link in my <a> is working.

My question is: Is there a way to "z-index" the <a> so when I click on it, the menu is not triggered while keeping the <a> inside the <button>. If not, what do you suggest?

My code: https://codepen.io/anon/pen/GaygNQ

Answer 1

根据W3C，<button>元素只能包含phrasing content，不能包含interactive content。我只是建议您将<a>放在<button>元素之外，并使用弹性布局。

Answer 2

请检查此https://jsfiddle.net/gyd1to9z/ 因此a应该属于他自己的元素。我对您的代码进行了一些修改，

 <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
          <a class="modificationUtilisateur" href="https://www.google.fr/" id="">
            <i class="fas fa-pen fa-pen-indicateur" title="Modifier"></i>
          </a>
        </button>
      </h2>
    </div>

到

<div class="card-header" id="headingOne">
        <button class="btn btn-link text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
        <button class="btn btn-link text-right" >
          <a class="modificationUtilisateur" href="https://www.google.com/" id=""target="_blank">
            <i class="fas fa-pen fa-pen-indicateur" title="Modifier"></i>
          </a>
        </button>
    </div>

在您的CSS中，我已删除

.fa-pen {
  float: right;
  z-index: 100000;
}

并用

替换

#headingOne{
  display:flex;
}

希望这就是您想要的。

Answer 3

如果您正在使用引导程序，那为什么不使用row类，以使<a>不在<button>内

   <div class="row">
      <div class="col-md-9">
         <button class="btn btn-link text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
             Collapsible Group Item #1
         </button>
      </div>
      <div class="col-md-3">
        <a class="modificationUtilisateur" href="https://www.google.fr/" id="">
            <i class="fas fa-pen fa-pen-indicateur" title="Modifier"></i>
        </a>
      </div>
  </div>

类似这样的事情。希望有帮助。

Boostrap 4：<a> in a </a> <按钮> <a>

3 个答案: