我之前也踩过这个坑！ng2-completer的下拉框默认样式经常会和输入框出现偏移，而且官方演示页确实没给出针对性的样式调整示例，直接用.completer-dropdown-holder没效果大概率是样式优先级或者Angular视图封装的问题，给你分享几个亲测有效的解决办法：

• 提升样式选择器优先级，穿透组件封装
  Angular的视图封装机制会隔离组件内部样式，普通的类选择器可能无法生效。你可以用::ng-deep来穿透样式隔离，同时加上!important（如果需要）强制覆盖默认样式：

::ng-deep .completer-dropdown-holder {
  left: 0 !important; /* 强制对齐输入框左侧 */
  top: calc(100% + 1px) !important; /* 调整垂直间距，避免和输入框边框重叠 */
  width: 100% !important; /* 让下拉框宽度和输入框一致 */
  margin: 0 !important;
}

如果你的组件设置了ViewEncapsulation.None，就不需要::ng-deep，直接写样式即可。

• 基于输入框容器定位下拉框
  给输入框的外层容器设置相对定位，让下拉框以这个容器为基准对齐，能避免输入框自带的padding或边框导致的偏移：

/* 给输入框外层容器加这个类 */
.completer-input-container {
  position: relative;
}

::ng-deep .completer-dropdown-holder {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  margin-top: -1px; /* 消除输入框边框和下拉框之间的缝隙 */
}

对应的模板里给容器加上类：

<div class="completer-input-container">
  <ng2-completer [(ngModel)]="searchText" [dataService]="myDataService"></ng2-completer>
</div>

• 利用组件配置辅助对齐
  ng2-completer本身提供了一些配置项，配合样式调整效果更好：
  • 设置dropdownWidth="100%"让下拉框宽度和输入框完全一致
  • 调整dropdownPosition为bottom（默认值，但明确设置能避免自动定位的偏差）

<ng2-completer 
  [(ngModel)]="searchText"
  [dataService]="myDataService"
  [dropdownWidth]="'100%'"
  [dropdownPosition]="'bottom'">
</ng2-completer>

• 排查全局样式干扰
  有时候全局的CSS重置样式（比如* { box-sizing: content-box; }）会导致下拉框宽度计算错误，你可以给下拉框强制设置盒模型：

::ng-deep .completer-dropdown-holder {
  box-sizing: border-box;
}

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