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>

依旧......

不在移动视图中时显示第二个按钮（关闭导航）。
第一个按钮（打开导航）没有显示，但我仍然可以点击它应该在的位置，并显示第二个按钮（关闭导航）。
第二个按钮（关闭导航）未显示。

我怎样才能得到它所以它的功能就像前两个图像没有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>

按钮标记只能包含内联元素，而div是一个块元素

<div>不在<button>

1 个答案: