select中的选项与元素宽度不匹配

Question

如您所见 - 一旦点击选择菜单 - 选项重叠。

我想知道是否有人偶然发现这种行为以及什么可以将选项宽度与选择宽度相匹配 - 我没有添加小提琴，因为问题出现在我无法分享的项目中。所以我需要一种更通用的方法。

.select {
   width: 100%;
   border-radius: 5px;
   border: 1px solid #dcdcdc;
   font-size: 12px;
 }

Answer 1

我在这里推测，因为您的问题信息有限，但我认为问题在于您为select和option使用了不同的字体大小。从屏幕截图中可以看出，您使用的是不同的字体大小。

考虑以下代码：

.select {
  border-radius: 5px;
  border: 1px solid #dcdcdc;
  font-size: 12px;
}

.select option {
  font-size: 16px;
}

<select class="select">
  <option selected>i like burger and fries</option>
  <option>i like burger and fries</option>
  <option>i like burger and fries</option>
</select>

正如您所看到的，它会产生同样的问题。您需要检查您的代码和CSS，以确保您没有使用不同的字体大小。如果字体大小相同，那么选项应该正常排列。

上述代码的解决方案是简单地从CSS中删除.select option定义。

请注意，还有其他属性可能导致大小不匹配，而不仅仅是字体大小。例如，字体样式，间距，填充等。您基本上需要确保不要以不同方式设置选项的样式，只需让它们从选择继承。

Answer 2

Solution :

＆＃13;

＆＃13;

select {
   width: 100%;
   border-radius: 5px;
   border: 1px solid #dcdcdc;
   font-size: 12px;
 }

＆＃13;

<select>
  <option tabindex='-1'>I like Burger and fries</option>
  <option>I like Burger and fries</option>
  <option>I like Burger and fries</option>
  <option>I like Burger and fries</option>
  <option>I like Burger and fries</option>
  <option>I like Burger and fries</option>
</select>

＆＃13;

＆＃13;

＆＃13;