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

Note: If you want to override existing classes just use !important

DEMO HERE