html - 日期选择下拉列表中的选项未对齐 (Firefox)

Question

在 Firefox 中，此日期选择下拉菜单中的选项排列不当。见下图:

关于我可以做些什么来使选项对齐的任何提示？

此处的 CSS:

.dob-selects-container {
  display: block;
  -moz-box-sizing: border-box;
  float: left;
  min-height: 30px;
  margin-left: 2.12766%;

  :nth-child(1) {
    width: 120px;
    display: inline-block
  }

  :nth-child(2) {
    width: 60px;
    display: inline-block
  }

  :nth-child(3) {
    width: 80px;
    display: inline-block
  }
}

Answer 1

如果您只是使用 :nth-child() 指定样式规则它将应用于所有匹配的元素。

您指定了 display:inline-block对于使用子选择器的前 3 个 child ，因此他们将像文本一样坐在一起。 March被拉下，因为它在同一行中没有任何可用空间..

如果您只是想为 <select> 应用它元素，尝试

select:nth-child(1) {
 width: 120px;
 display: inline-block
}