数据列表问题，需要显示在输入字段下方而不是右侧

Question

所以我是 Angular 的新手，我一直在尝试很多事情来改变我的数据列表中选项的显示方式......它们以正确的格式和所有内容显示，这只是事实他们被放置在我搜索字段的右侧，我在那里寻找联系人而不是在它下面。

这是我当前的代码：

    <datalist id="listContactPersonNavbar">
  <ng-container *ngFor="let cp of contactPersons; trackBy: trackByContactPersonId">
    <option [value]="cp.name"> {{cp.customerName}}</option>
  </ng-container>
</datalist>



<li class="nav-item">
        <div ngbDropdown placement="bottom-start" display="dynamic" #myDrop="ngbDropdown">
          <a
            class="contactPersons nav-link far fa-users navbarHeader pointer"
            id="dropdownForm2"
            ngbDropdownToggle
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
          </a>
          <div
            ngbDropdownMenu
            aria-labelledby="dropdownForm2"
            style="padding: unset; width: 27rem;"
          >
            <!--            //Visuelle box af søgningen -->
            <div>
                <input
                  class="form-control"
                  type="text"
                  id="contactPersonSearch"
                  placeholder="Søg efter kontaktperson..."
                  (change)="selectContactPerson($event.target);myDrop.close()"
                  (focus)="selectContactPerson($event.target)"
                  (blur)="selectContactPerson($event.target)"
                  (keydown.enter)="selectContactPerson($event.target)"
                  list="listContactPersonNavbar"
                />
            </div>
          </div>
        </div>
      </li>

预先感谢您的帮助，请注意我是 Angular 的新手！