AngularJS：如何使下拉框尺寸与输入框保持一致？

嘿，我懂你想要的效果——让下拉框展开后的选项列表和旁边固定尺寸的输入框完全对齐，对吧？这其实可以通过CSS配合一点点HTML结构调整轻松搞定，下面给你一步步的解决方案：

第一步：给输入框和下拉框统一样式类 #

先给你的输入框和下拉框加上同一个自定义类，方便统一控制尺寸，比如fixed-size-field。修改你的HTML片段：

<body ng-controller="Controller">
  <h1>Plunkr Example</h1>
  <fieldset style="border:1px solid black;">
    <legend>Data</legend>
    <span style="float:right">
      Check4: <input type="text" id="input" class="fixed-size-field" ng-repeat="x in string | filter : 'check'" ng-model="...">
      <!-- 你的下拉框 -->
      <select class="fixed-size-field" ng-model="...">
        <option value="...">...</option>
      </select>
    </span>
  </fieldset>
</body>

第二步：用CSS固定尺寸并确保精准对齐 #

添加以下CSS样式，核心是给元素设置和输入框一致的固定宽度，同时用box-sizing: border-box确保边框、内边距不会额外撑开宽度，让两者的实际显示尺寸完全匹配：

.fixed-size-field {
  /* 替换成你输入框已有的固定宽度，比如200px */
  width: 200px;
  box-sizing: border-box;
  padding: 4px 8px; /* 可选，根据你的设计调整内边距 */
  border: 1px solid #ccc; /* 可选，统一边框样式让视觉更协调 */
}

/* 针对原生select的下拉列表，确保它和select本身宽度一致（部分浏览器默认可能有差异） */
.fixed-size-field option {
  width: 100%;
}

如果你用的是自定义AngularJS下拉组件（比如ui-select） #

如果不是原生<select>，而是像ui-select这类第三方组件，需要额外调整下拉面板的宽度，比如：

.ui-select-container .ui-select-match {
  width: 200px; /* 和输入框同宽 */
  box-sizing: border-box;
}
.ui-select-container .ui-select-choices {
  width: 200px; /* 让下拉面板和输入框宽度完全一致 */
}

小提醒 #

• 一定要确保输入框和下拉框的box-sizing属性一致，否则即使宽度数值相同，实际显示也会有细微差异
• 尽量把样式写在单独的CSS文件里，别用内联样式，后续维护起来更方便

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