html - 不在 内

Question

我正在尝试验证带有移动下拉菜单的 HTML5 页面。

验证后，我收到一条错误消息，指出按钮内不允许使用 div，但是当我尝试移动 div 来包裹按钮时，它无法正确显示。第一个按钮显示正常，但第二个按钮或“X”始终显示，并且不在正确的区域。

FIRST BUTTON - 这就是第一个按钮(打开导航)的样子。
SECOND BUTTON - 这是第二个按钮(关闭导航)的外观。

HTML如下:

<button class="navbar-toggler pull-xs-right hidden-md-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
  <div class="hamburger-icon"></div>
</button>
<ul class="nav-dropdown collapse pull-xs-right nav navbar-nav navbar-toggleable-sm" id="exCollapsingNavbar">
  <li class="nav-item nav-btn"><a class="nav-link btn btn-primary" href="login.php" id="c1">Login</a></li>
  <li class="nav-item nav-btn"><a class="nav-link btn btn-primary" href="index.php" id="c2">Register</a></li>
</ul>
<button hidden="" class="navbar-toggler navbar-close" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
  <div class="close-icon"></div>
</button>

CSS如下:

  .navbar-dropdown .hamburger-icon {
content: "";
width: 16px;
-webkit-box-shadow: 0 -6px 0 1px,0 0 0 1px,0 6px 0 1px;
-moz-box-shadow: 0 -6px 0 1px,0 0 0 1px,0 6px 0 1px;
box-shadow: 0 -6px 0 1px,0 0 0 1px,0 6px 0 1px; }
  .navbar-dropdown .close-icon {
position: relative;
width: 21px;
height: 21px;
overflow: hidden; }
.navbar-dropdown .close-icon::before, .navbar-dropdown .close-icon::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -1px; }
.navbar-dropdown .close-icon::before {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg); }
.navbar-dropdown .close-icon::after {
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg); }

当我尝试这样做时:

<div class="hamburger-icon">
<button>
</div>

等等……

1. 第二个按钮(关闭导航)在不在移动 View 中时显示。
2. 第一个按钮(打开导航)没有显示，但我仍然可以点击它应该在的位置，第二个按钮(关闭导航)正在显示。
3. 第二个按钮(关闭导航)未显示。

我怎样才能让它像前两个图像一样工作，而 div 不在按钮的内部？

Answer 1

尝试使用 span 而不是 div

<button class="navbar-toggler pull-xs-right hidden-md-up" 
             type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
    <span class="hamburger-icon"></span>
</button>

button 标签只能包含内联元素，而 div 是 block 元素