垂直排列的两个select宽度不一致问题及外层div必要性咨询

一、相同样式下Select宽度细微差异的原因 #

• 浏览器默认样式差异：不同浏览器（甚至同一浏览器的不同版本）对<select>的内置组件（比如右侧的下拉箭头）宽度处理有细微区别，哪怕你设置了一致的padding和边框，这些内置元素的宽度差会导致整体宽度不一致。
• 盒模型计算误差：默认的content-box盒模型中，元素总宽度=内容宽度+padding+border+浏览器内置元素宽度。即便文本内容相同，字体渲染时的像素对齐、内容宽度的细微计算偏差，加上内置元素的宽度差异，就会出现肉眼可见的宽度差。
• 自动宽度的不确定性：当未显式设置width时，浏览器会根据元素内部内容、内置组件自动计算宽度，这个计算逻辑并非完全统一，容易出现细微偏差。

二、外层.filter-searchdiv是否需要？ #

取决于你的实际需求：

• 需要的场景：如果要把这两个<select>和下方按钮作为一个整体来控制样式（比如统一的左右边距、后续添加背景/边框、响应式布局时整体调整），外层div能帮你更高效地维护样式，避免逐个修改元素的重复操作。
• 可省略的场景：如果只是简单垂直排列元素，且不需要统一控制组内样式，也可以直接给每个<select>和按钮单独设置margin等样式，但这种方式后期维护成本更高。

优化建议 #

如果想彻底解决宽度不一致问题，建议：

1. 显式设置width（比如你之前用的width:50%），强制统一元素宽度；
2. 加上box-sizing: border-box，让padding和border包含在设置的宽度内，避免盒模型计算带来的误差：

.drop {
    display: block;
    margin: auto;
    font-size: 18px;
    padding: 12px 8px; /* 去掉过大的右侧padding，改用width控制更合理 */
    width: 80%; /* 和外层div的左右margin10%对应，总宽度占满可用空间 */
    box-sizing: border-box;
    border: 2px solid black;
    border-radius: 8px;
    background-color: white;
}

内容的提问来源于stack exchange，提问作者Kraken