CSS Width and Overlap

Question

我想從輸入字段的寬度繼承我的suggestion div的寬度，同時將它與對象重疊。我下面的CSS重疊，但不會繼承輸入字段的寬度。我試過讓它達到100％，但它變得比輸入字段更長。

.suggestion { 
 
    cursor: pointer; 
 
    background: #FFF; 
 
    box-shadow: 0 2px 2px 0 rgba(34,36,38,.15); 
 
    padding: 5px 20px 5px 20px; 
 
    border-radius: .28571429rem; 
 
    border: 0px solid rgba(34,36,38,.15); 
 
    z-index: 1; 
 
    
 
    position: absolute; 
 
    width: inherit; 
 
} 
 
.search-res{ 
 
    margin-bottom: 5px; 
 
} 
 
.search-res:hover{ 
 
    margin-bottom: 5px; 
 
    color: #2196f3; 
 
} 
 

 
.warning { 
 
    color: orange 
 
}

<input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32"> 
 
<div class="suggestion" *ngIf="suggestions"> 
 
    <div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)"> 
 
     {{suggestion.name}} 
 
    </div> 
 
</div>

Answer 1

下面是一個例子：https://codepen.io/anon/pen/KvgoPX

我改變的是：

• 您的建議DIV是絕對的，它需要是相對於以某種方式輸入。這就是外面有一個輸入容器。這可以是任何你想要的寬度。
• 還有另一個對象來顯示它重疊。

.inputContainer { 
 
    width:200px; 
 
    position:relative; 
 
    background:green; 
 
} 
 

 
input { 
 
    width:100%; 
 
} 
 

 
.suggestion { 
 
    cursor: pointer; 
 
    background: #FFF; 
 
    box-shadow: 0 2px 2px 0 rgba(34,36,38,.15); 
 
    padding: 5px 20px; 
 
    border-radius: .28571429rem; 
 
    border: 0px solid rgba(34,36,38,.15); 
 
    z-index: 1; 
 
    box-sizing:border-box; 
 
    text-align:center; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
.search-res{ 
 
    margin-bottom: 5px; 
 
} 
 
.search-res:hover{ 
 
    margin-bottom: 5px; 
 
    color: #2196f3; 
 
} 
 

 
.warning { 
 
    color: orange 
 
}

<div class="inputContainer"> 
 
    <input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32"> 
 
    <div class="suggestion" *ngIf="suggestions"> 
 
    <div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)"> 
 
     {{suggestion.name}} 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="otherStuff"> This is where other objects are </div>