html - 如何使按钮宽度在媒体查询中起作用

Question

我的代码中有 6 个按钮，我希望它们的宽度都相同，并且只有第一个按钮有效。我尝试使用 width:auto important; 但我仍然无法覆盖其余 5 个按钮。请帮我。谢谢。

#subpage .btn {
  float: left;
  margin: 1% 1%;
  padding: 15px;
  text-align: center;
  border-radius: 5px;
  background: #222;
}

#subpage .btn a {
  display: block;
  padding: 15px;
  color: #FFF;
  text-decoration: none;
}

#subpage .b1 {
  width: 60%;
  clear: both;
  float: none;
  margin: 0 auto;
}

#subpage .b2 {
  width: 45%;
}

#subpage .b3 {
  width: 28.3%;
}

@media screen and (max-width: 700px) {
  #subpage .btn {
    float: none;
    margin: 1% 7% !important;
    padding: 0 !important;
  }
  #subpage .b1,
  #subpage .b2,
  #subpage .b3 {
    width: auto !important;
  }
}

<div class="btn b1"><a href="../sample.html">サンプルボタン</a></div>
<div class="btn b2"><a href="../sample.html">サンプルボタン</a></div>
<div class="btn b2"><a href="../sample.html">サンプルボタン</a></div>
<div class="btn b3"><a href="../sample.html">サンプルボタン</a></div>
<div class="btn b3"><a href="../sample.html">サンプルボタン</a></div>
<div class="btn b3"><a href="../sample.html">サンプルボタン</a></div>

预期结果

我的

Answer 1

我找到了我的问题的解决方案。我将 width:auto !important; 放在 .btn 中。并添加了 clear:both; float :无； margin:0 auto; 在 .b2, .b3 而不是 width:auto !important; 我将它的大小调整为 width:86% !重要;

#subpage .btn{
    float: none;
    margin: 2px 7% !important;
    padding: 0 !important;
    width: auto !important;
}

#subpage .b2,
#subpage .b3{
   clear: both;
   float: none;
   margin: 0 auto;
   width: 86% !important;
}