下拉菜单仅适用于Chrome浏览器而不适用于Firefox

Question

Dropdown list inside the HTML header table

我在上面的链接中问了这个问题，它已经修复，但只能在Chrome中运行而不是在Firefox中。我需要的是我只需要在表头旁边显示下拉箭头头。但是现在我可以看到它仅显示在标题下方，并且显示为完整宽度。

.drop-down {
  border: none;
  margin: 0;
  width: 10px;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!--JS files-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="row-fluid top-space-20">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Student ID</th>
        <th>Student Name</th>
        <th>Student Email</th>
        <th>Department</th>
        <th>Grade
          <select class=".drop-down form-control" id="statusFilter">
            <option value="">Student grade</option>
            <option value="Grade A">A</option>
            <option value="Grade B">B</option>
            <option value="Grade C">C</option>
            <option value="Grade D">D</option>
            <option value="Grade E">E</option>
            <option value="Grade F">F</option>
            <option value="Grade G">G</option>
          </select>
        </th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

我保持宽度很小，然后尝试使用display：inline。没有任何效果。 没事。 所以我需要的是我的下拉菜单只能在箭头标题和“成绩”标题旁边显示。而不是在“成绩”标题下方

Answer 1

问题是.form-control类获得块显示。在CSS中尝试

.form-control{
  display: inline-block;
  width: 20px; /* or whatever width looks good for your purpose */
}

然后，您可能需要玩一下边距或垂直对齐，以使表格标题看起来不错