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

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:none; margin:0 auto;中添加了.b2, .b3，然后将width:auto !important;的大小调整为width:86% !important;

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