html - 五个子元素占据了容器宽度的100％，每个元素都有边距

我是响应式设计的新手，我正努力解决以下问题。

我正在创建一个搜索/过滤器栏，该栏需要每行具有五个过滤器，边缘的边距为1％，中间的边距为2％。我认为这很容易；如果我将滤镜的宽度设为18％，并给每个滤镜一个左右边界，则为20％×5 = 100％。不幸的是，这导致第五个过滤器转到下一行。

示例：https://jsfiddle.net/L3sd5qLo/

.search-bar {
  width: 100%;
  background-color: #aaa;
}
.search-bar__filter {
  margin: 0 1%;
  width: 18%;
}

<div class="search-bar">
  <select id="filter1" class="search-bar__filter">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <select id="filter2" class="search-bar__filter">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <select id="filter3" class="search-bar__filter">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <select id="filter4" class="search-bar__filter">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <select id="filter5" class="search-bar__filter">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
  <select id="filter6" class="search-bar__filter">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

编辑我想表明第六项应该转到新行，前五个子项占据行宽的100％。

最佳答案

最简单的方法是将float添加到.search-bar__filter：

.search-bar__filter {
 margin: 0 1%;
 width: 18%;
 float:left;
}