html - 生成文字并选择水平下拉菜单

我正在尝试制作一个类似文本的标签，并在同一行中选择下拉菜单。
当我同时使用display: inline时，它是有效的。但当我在select中使用div类时，它会中断。下面是一个例子

这是密码

<div class="col-md-2">
  <div> <span>test</span></div>

  <div>
    <select class="form-control" id="sel1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
</div>

我想排成一行。

最佳答案

为容器添加display: flex。

.flex {
  /* become a flex container */
  /* its children will be flex-items */
  display: flex;
  /* align items on font's baseline */
  align-items: baseline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-2 flex">
  <div><span>test</span></div>

  <div>
    <select class="form-control" id="sel1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
</div>