html - 制作文本并选择水平下拉菜单

Question

我正在尝试在同一行中制作类似标签和选择下拉列表的文本。当我对两个 div 使用 display: inline 时，它起作用了。但是当我在选择中使用 form-control 类时，它会中断。这是例子

这是代码

<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>

我想在同一行。

Answer 1

为容器添加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>