将两个按钮水平对齐

Question

如何将两个按钮水平对齐。

 <input type="submit" class="app-button" id="btnSearch" value="Aply Filters"><br>
<input type="submit" class="app-button" id="btnClearSearch" value="Clear Filters">

下面是我正在使用的 CSS。

 .app-button{
     list-style: none;
     text-align: center;
     background-color: #01AAAD;
     width: 150px;margin:0;
     line-height: 60px;
}

小提琴

原文由 Suraj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我想你需要这样的东西

（我只删除 <br> ，并将其包装到 .row 中）。

 .app-button{
    background-color: #01AAAD;
    width: 150px;
    margin:0 20px;
    display:inline-block;
    line-height: 60px;
}
.row{
  text-align:center;
  /*the same margin which is every button have, it is for small screen, and if you have many buttons.*/
  margin-left:-20px;
  marin-right:-20px;
}

 <div class="row">
   <input type="submit" class="app-button" id="btnSearch" value="Aply Filters">
   <input type="submit" class="app-button" id="btnClearSearch" value="Clear Filters">
 </div>

原文由 Mamikon Arakelyan 发布，翻译遵循 CC BY-SA 3.0 许可协议