CSS3文本框水平对齐，间距曲率

Question

我在下图中有一个按钮，3个文本框和另一个按钮。

我已经尝试了几个小时来安排它我喜欢的方式，现在我的大脑被炒了。

我更喜欢这样：

很抱歉，我在Paint中做了很糟糕的绘画。

以下是每个框的HTML：

<div class="keywords">
  <input class="form-control" placeholder="Keywords 1" type="text">
</div>

<div class="select-location">
 <input class="main-category" placeholder="Keywords 2" type="text">
</div>

<div class="select-location">
 <input class="main-category" placeholder="Keywords 3" type="text">
</div>

我理解关键字2和3目前共享同一个类，我这样做纯粹是为了让它们按照当前的方式对齐。

以下是关键字和选择位置的CSS：

.keywords {
  float: left;
  width: 31%;
  height: 40px;
  margin-left: 10px;
}

.select-location {
  float: left;
  width: 30%;
  height: 40px;
  border-left: 1px solid #aaaaaa;
}

我花了很长时间尝试这样做，但是我陷入困境并无法理解。

Answer 1

就这样做：

<强> CSS

.keywords {
  float: left;
  width: 30%;
  height: 40px;
}


.wrapper{
    display: block;
    padding: 10px;
    background: #202020;
    overflow: hidden;
}
.select-location {
  float: left;
  width: 30%;

}

input{
    width: 100%;
    display:block;
      height: 40px;
    border:none;

}

button{
    display: block;
    width: 5%;
    height: 42px;
    border: none;   
    border-radius: 0px 4px 4px 0px;
    float:left;
}

button.firstb{
    float:left;
    border-radius: 4px 0px 0px 4px;
}

  

注意：如果要覆盖现有类，只需使用!important

<强> DEMO HERE