HTML按钮样式不正确

时间：2019-03-13 14:09:08

标签： html css

我试图通过使用移动按钮上的相同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;
}

2 个答案:

答案 0 :(得分：1)

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

只需删除按钮标签周围的.mobile-grid div，然后像在桌面视图中一样对按钮进行样式设置即可。

答案 1 :(得分：0)

已添加

button {
    background-color: #4C9FCF;
    color: white;
    border: none;
}

button:focus{
outline:none}


#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;
}

button {
    background-color: #4C9FCF;
    color: white;
    border: navajowhite;
}

button:focus{
outline:none}

@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>

相关问题
最新问题