CSS:将三个按钮对齐成两行

ul, li, input{
  box-sizing: border-box;
}
.menu-search ul{
  list-style: none;
  padding: 0;
}
.menu-search ul li:first-child{
  display: flex;
  justify-content: space-between;
}
.menu-search ul li:first-child input{
  flex-basis: 45%;
}
.menu-search .button{
    background-color:#01AAAD;
    color:#FFFFFF;
    text-align:center;
    height:60px;
    line-height:35px;
    border-radius:5px;
    font-size:12px;
    margin-top:20px;
}
.menu-search .close-button{
  width: 100%;
}

<div class="menu-search">
  <ul>
    <li>
      <input class="button apply-button" id="btnTrustSearch" value="Aply Filters">
      <input class="button clear-button" id="btnTrustClearSearch" value="Clear Filters">
    </li>
    <li><input class="button close-button close-search" id="btnTrustClearSearch" value="Clear Filters"></li>
  </ul>
</div>

您的选择归结为浮动元素或使用内联块。我已经修改了freestock.tk的解决方案以使用内联块。请注意，当您使用内联块时，HTML 中的空格变得很重要。因此，如果在第一个输入元素之后添加换行符，则前两个按钮将一个接一个地显示在另一个按钮的下方。

您的选择最终将归结为浮点数和内联块之间的差异以及您需要每个模块的特征。有关何时选择内联块的更多信息，请单击此处

• 使用内联块 — 当您需要更好地控制元素的垂直对齐或水平定位时。
• 使用浮点数 — 当您需要其他元素围绕元素流动、支持旧版本的 IE 或不想处理水平空格问题时。

对于此解决方案同样重要的是 CSS3 框大小调整属性 了解更多

.menu-search {
  width: 500px;
  height: 100%;
  margin: 0px;
}
.button {
  height: 60px;
  text-align: center;
  color: white;
  background-color: Red;
  display: inline-block;
  margin: 10px 5% 10px 5%;
  box-sizing: border-box;
}
.one,
.two {
  width: 40%;
}
.three {
  width: 90%;
}

<div class="menu-search">
  <input class="one button" id="btnTrustSearch" value="One"><input class="two button" id="btnTrustClearSearch" value="Two">
  <input class="three button" id="btnTrustClearSearch" value="Three">
</div>

.menu-search .apply-button {
  width: 45%;
  color: #FFFFFF;
  text-align: center;
  height: 60px;
  line-height: 35px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 12px;
  margin-top: 20px;
  float: left;
  background-color: #01AAAD;
}
.menu-search .clear-button {
  float: left;
  width: 45%;
  color: #FFFFFF;
  text-align: center;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 12px;
  margin-top: 20px;
  clear: right;
}
.clear-button {
  background-color: #01AAAD;
  color: #FFFFFF;
}
.menu-search .close-button {
  float: left;
  width: 90%;
  color: #FFFFFF;
  text-align: center;
  height: 35px;
  line-height: 60px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 12px;
  margin-top: 20px;
}
.close-button {
  background-color: #01AAAD;
  color: #FFFFFF;
}
.menu-search {
    width: 200px;
    margin: auto auto;

<div class="menu-search">
      <input class="apply-button" id="btnTrustSearch" value="Aply Filters">
      <input class="clear-button" id="btnTrustClearSearch" value="Clear Filters">
      <input class="close-button close-search" id="btnTrustClearSearch" value="Clear Filters">
</div>

使用以下 CSS ：

.menu-search .apply-button{
    width:45%;
    margin-right:10%;
    color:#FFFFFF;
    text-align:center;
    height:60px;
    line-height:35px;
    border-radius:5px;
    margin-bottom:10px;
    font-size:12px;
    margin-top:20px;
    float:left;
}
.apply-button{ 
     background-color:#01AAAD;
     color:#FFFFFF;
 }

.menu-search .clear-button{
    float:left;
    width:45%;
    color:#FFFFFF;
    text-align:center;
    height:60px;
    line-height:60px;
    border-radius:5px;
    margin-bottom:10px;
    font-size:12px;
    margin-top:20px;
}
.clear-button{ 
     background-color:#01AAAD;
     color:#FFFFFF;
 }

.menu-search .close-button{
    float:left;
    width:100%;
    color:#FFFFFF;
    text-align:center;
    height:60px;
    line-height:60px;
    border-radius:5px;
    margin-bottom:10px;
    font-size:12px;
    margin-top:20px;
}
.close-button{ 
     background-color:#01AAAD;
     color:#FFFFFF;
 }