为什么橙色下拉旁边有灰色块？

Question

我现在已经找了2个小时而且无法弄清楚，橙色下拉块旁边有一块灰色的块，我无法摆脱它。我可能认为它可以与css一起使用，但我还不擅长编码，因为我只编写了3个月的时间请帮助我。

＆＃13;

＆＃13;

.dropbtn {
              background-color: orange;
              color: white;
              padding: 16px;
              font-size: 16px;
              border: none;
              cursor: pointer;
          }

          .dropdown {
              position: relative;
              display: inline-block;
          }

          .dropdown-content {
              display: none;
              position: absolute;
              background-color: #f9f9f9;
              min-width: 160px;
              box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
              z-index: 1;
          }

          .dropdown-content a {
              color: black;
              padding: 12px 16px;
              text-decoration: none;
              display: block;
          }

          .dropdown-content a:hover
          {background-color: orange}

          .dropdown:hover .dropdown-content {
              display: block;
          }

          .dropdown:hover .dropbtn {
              background-color: #000000;
          }

＆＃13;

<div class="dropdown" style="background-color: white">
            <button
          class="dropbtn">name<button>
            <div class="dropdown-content">
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
            </div>
          </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您错过了按钮上的结束标记（</button>）。在下面修复它！

.dropbtn {
              background-color: orange;
              color: white;
              padding: 16px;
              font-size: 16px;
              border: none;
              cursor: pointer;
          }

          .dropdown {
              position: relative;
              display: inline-block;
          }

          .dropdown-content {
              display: none;
              position: absolute;
              background-color: #f9f9f9;
              min-width: 160px;
              box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
              z-index: 1;
          }

          .dropdown-content a {
              color: black;
              padding: 12px 16px;
              text-decoration: none;
              display: block;
          }

          .dropdown-content a:hover
          {background-color: orange}

          .dropdown:hover .dropdown-content {
              display: block;
          }

          .dropdown:hover .dropbtn {
              background-color: #000000;
          }

<div class="dropdown" style="background-color: white">
            <button
          class="dropbtn">name</button>
            <div class="dropdown-content">
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
              <a href="#">name</a>
            </div>
          </div>

Answer 2

您错过了</button>元素之前显示的按钮的结束dropdown-content标记：

<!-- Ensure your button is closed PRIOR to the rest of your content -->
<button class="dropbtn">name</button>
<div class="dropdown-content">
  <a href="#">name</a>
  <!-- Additional names omitted for brevity -->
</div>

无效的语法通常会产生这样的标记问题，因为浏览器不知道你的按钮何时停止＆＃34;没有你明确告诉它。