HTML 按钮样式不正确

Question

我试图通过在移动按钮上使用相同的 css 样式来重新创建我已经为我的桌面站点创建的按钮。我曾尝试一次删除一行 css，但它似乎不是 css(毕竟相同的 css 适用于桌面按钮。

问题:我希望按钮具有完整的样式，但它保留了常用按钮并将样式添加为边框

#clients-title {
  background: #f4f4f4;
  padding: 1rem 0;
}

#clients-grid {
  display: grid;
  background: #f4f4f4;
  text-align: center;
  padding: 1rem 0;
  margin: 0 10%;
  grid-template-columns: 33.3% 33.3% 33.3%;
}

#clients-btn-grid {
  display: grid;
  background: #f4f4f4;
  text-align: center;
  padding: 1rem 0;
  margin: 0 10%;
  grid-template-columns: 33.3% 33.3% 33.3%;
}

#clients-btn-grid .cr-btn {
  background-color: #4C9FCF;
  margin-left: auto;
  margin-right: auto;
  margin-top: -40px;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#clients-btn-grid .cr-btn:hover {
  cursor: pointer;
  background-color: #333;
}

@media(max-width: 800px) {
  #clients-btn-grid {
    display: none;
  }
}

.mobile-grid {
  background-color: #4C9FCF;
  margin-left: auto;
  margin-right: auto;
  margin-top: -40px;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

@media(min-width: 800px) {
  .mobile-grid {
    display: none;
  }
}

<section id="clients-title">
    <div class="grid-items">
      <h2 class="m-heading text-center">
        <span id="client-r" class="text-primary">Client</span> Resources
      </h2>
    </div>

    <div id="clients-grid">
      <div class="grid-items">
        <h2>
        TD Ameritrade Access
        <p></p>
        </h2>
        <div class="mobile-grid">
          <button onclick="location.href='https://www.advisorclient.com/login'">LOGIN</button>
        </div>
      </div>
      <div class="grid-items">
        <h2>
        American Equity
        <p></p>
        </h2>
        <div class="mobile-grid">
          <button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'">LOGIN</button>
        </div>
      </div>
      <div class="grid-items">
        <h2>
        IRS-Where's My Refund?
        <p></p>
        </h2>
        <div class="mobile-grid">
          <button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'">LOGIN</button>
        </div>
      </div>
    </div>

    <div id="clients-btn-grid">
      <div class="grid-items">
        <button onclick="location.href='https://www.advisorclient.com/login'"class="cr-btn">LOGIN</button>
      </div>
      <div class="grid-items">
        <button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'"class="cr-btn">LOGIN</button>
      </div>
      <div class="grid-items">
        <button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'"class="cr-btn">LOGIN</button>
      </div>
    </div>
  </section>

如果在运行代码后单击全屏，您可以看到按钮正确显示。

解决方案:我只需要用按钮定位父 div，而不是定位按钮所在的 div，例如

#clients-grid button {
  background-color: #4C9FCF;
  margin-left: auto;
  margin-right: auto;
  margin-top: -40px;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Answer 1

您没有在#clients-grid 中设置按钮样式。我还建议您为桌面和移动 View 使用相同的按钮标签，因为如果您必须更改链接，这将是一场灾难。

只需删除按钮标签周围的 .mobile-grid div，并像在桌面 View 中一样设置按钮的样式。