Question

使用锚标记时，下拉菜单位于按钮下方，但使用按钮时，它位于菜单上方

<div class="menubar">
  <div class="dropdown">
    <button class="dropbtn">File 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">New</a>
      <a href="#">Open</a>
      <a href="#">Save</a>    </div>
  </div>
  <a>Edit</a> 
  <a>Tools</a>   
</div>

Button implementation

  <div class="menubar">
  <div class="dropdown">
    <button class="dropbtn">File 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <button>New</button> 
      <button>Open</button>
      <button>Save</button>
    </div>
  </div>
  <button>Edit</button> 
  <button>Tools</button>   
</div>

Answer 1

菜单栏按钮中的浮动导致问题。

删除浮动可以纠正问题，而不会影响布局。

Anchor标签实现没有遇到同样的问题，因为“File”项目有一个按钮元素而不是锚元素，因此没有为顶级锚元素拾取样式

.menubar button {
  float: none;
}

为什么锚标签和按钮的行为不同？

1 个答案: