CSS设置width:100%后.selected等元素宽度无法与其他表单控件对齐

问题原因 #

• 包裹下拉组件的.container类设置了max-width: 300px，限制了子元素最大宽度，远小于表单内其他控件的可用宽度，导致下拉相关组件整体偏窄
• .selected、.options-container未设置box-sizing: border-box，边框和内边距会额外叠加到设置的100%宽度上，导致元素宽度超出父容器或者显示异常
• 搜索输入框的样式参数（内边距、边框、背景色）和其他输入框不统一，也会导致视觉上宽度不对齐

解决方案 #

直接修改以下CSS代码即可：

/* 替换原有.container样式 */
.container {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 0 20px 0;
}

/* 在原有.selected样式中新增box-sizing属性，其余原有属性保留不变 */
.selected {
  box-sizing: border-box;
}

/* 在原有.select-box .options-container.active样式中新增box-sizing属性，其余原有属性保留不变 */
.select-box .options-container.active {
  box-sizing: border-box;
}

/* 调整.search-box input样式，和其他输入框参数对齐 */
.search-box input {
  font-family: "Arial";
  outline: 0;
  background: #f2f2f2;
  box-sizing: border-box;
  font-size: 15px;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s;
  width: 100%;
  border: 1px solid;
  padding: 15px;
  margin: 0 0 8px 0;
}

修改后所有输入框、下拉选择框、搜索框、按钮的宽度就会完全对齐，样式也能保持统一。

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