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>