CSS 宽度和重叠
CSS Width and Overlap
我想从输入字段的宽度继承我的 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>
举个例子: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>
我想从输入字段的宽度继承我的 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>
举个例子: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>