相对位置不会发生响应

Posted 2023-02-19

我在html / CSS方面很普通。我有一个下拉菜单，其中postion:absolute的下拉菜单不起作用。所以我将其更改为position:relative，但是问题是当下拉值长度较大时，下拉菜单移至左侧，如果下拉值长度较小，则移至右侧如下图所示。我希望该下拉菜单位于适当的位置，而不管下拉值如何。预先感谢。

.dropdown-menu 

    position: relative;
    float: right;
    margin-top: 5vh;
    margin-right: -15vh;
    font-size: 1.5rem;
    font-weight: bold;
    color: #337ab7;

        li 
            padding: 6px;
            &:hover 
                background-color: rgba(0, 0, 0, 0.1);
                cursor: pointer;
            
        
    

<div class="container-fluid" style="position:relative">
  <h3>
    <div *ngIf="test.questions?.length  == test.no_questions">
      <div class="dropdown-toggle" data-toggle="dropdown" style="float: right;">selectedCourse&nbsp;
      <i class="fa fa-angle-down" style="font-size: 0.7em; font-weight: 600;"></i>
    </div>
    <ul class="dropdown-menu">
      <li *ngFor="let item of user['subscribed_courses']" 
      [ngStyle]="'display':item.acr == selectedCourse ? 'none' : 'block' " 
      (click)="selectCourse(item.acr)">item.acr</li>
    </ul>
    </div>
    
    <b class="col-sm-12" style="width: 50%;"> editMode ? 'Edit' : 'Create' Test <i> - [in 3 STEPS]</i></b>
    </h3>
</div>    

答案

我认为问题出在您的CSSpart。从。dropdown-menu CSS中删除以下行，然后尝试..

margin-right：-15vh;