我试图创建一个类似于引导程序中输入组的组件。我未使用引导程序的默认输入组类的原因是默认情况下,我无法在输入组插件中添加多个按钮和输入元素。所以我决定使用display-table属性创建自定义输入组,但是当我使用此属性时,在按钮部分的顶部添加了一些额外的空间。
我需要将输入和计数器组件对准同一行。
HTML部分
<div class="product-order-form" matAutocompleteOrigin #origin="matAutocompleteOrigin">
<div class="product-inputGroup tableElem">
<div class="tableRow">
<input class="form-control tableCell" type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" [matAutocompleteConnectedTo]="origin">
<div class="counter tableCell">
<div class="counterContainer">
<div class="value-button" id="decrease" value="Decrease Value">-</div>
<input type="text" id="number" value="0" />
<div class="value-button" id="increase" value="Increase Value">+</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.tableElem{
display:table;
width:100%;
}
.tableRow{
display:table-row;
width:100%;
}
.tableCell{
display:table-cell;
}
.product-order-form{
height: 30px;
}
.counterContainer {
width: 150px;
height:30px;
}
.value-button{
text-align: center;
height: 100%;
width: 50px;
background: lightgray;
padding: 5px;
box-sizing: border-box;
float: left;
}
.value-button:hover {
cursor: pointer;
}
input#number{
text-align: center;
height: 100%;
border: none;
width: 50px;
float: left;
box-sizing: border-box;
border-top: 0.5px solid lightgray;
border-bottom: 0.5px solid lightgray;
}
这是我的stackblitz
答案 0 :(得分:0)
这里有两个问题:
.product-order-form
将高度设置为30px,这意味着它比某些子级/兄弟姐妹要短。这可能会导致问题(尝试添加overflow:hidden
才能看到其实际效果).tableCell
没有vertical-align
,这意味着它将定位在顶部o / t组件中。尝试添加vertical-align: middle
,它应该可以正常工作TL; DR
.tableCell[_ngcontent-c2] {
display: table-cell;
vertical-align: middle;
}
.product-order-form[_ngcontent-c2]{
height: auto;
}
应该做到这一点:)