html - 下拉菜单适用于 Chrome 而不是 Firefox

Question

HTML 标题表内的下拉列表

我已经在上面的链接中提出了这个问题，它得到了修复，但它只在 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.Nothing 工作。没有任何效果。所以我需要的是我的下拉菜单应该只在箭头和成绩标题之外可见。不在成绩标题下方

标签： htmlcssbootstrap-4

Answer 1

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

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

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