[英]Angular - Show fields side by side
I am trying to show the fields in the angular side by side no matter what I do it is still showing like below 我正在尝试并排显示成角度的场,无论我做什么,它仍然显示如下
And below is my html component 下面是我的html组件
<div id="report-prj-search">
<div class="dx-fieldset" >
<div class="dx-field">
<div class="dx-field-label">ShipTo Account</div>
<div class="dx-field-value">
<dx-select-box [dataSource]="ShipmentList" displayExpr="customer_shipto_name" (onValueChanged)="onValueChanged($event)" ></dx-select-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Purchase Order</div>
<div class="dx-field-value">
<dx-select-box [dataSource]="purchaseOrder" displayExpr="customer_purchase_order" ></dx-select-box>
</div>
</div>
<div class="dx-field">
<dx-button (onClick)="click($event)">Filter</dx-button>
</div>
</div>
</div>
I've refactored your HTML slightly so that you can use CSS Flexbox: 我已经稍微重构了HTML,以便可以使用CSS Flexbox:
<div id="report-prj-search">
<div class="dx-fieldset flex-column">
<div class="flex-row-container">
<div class="dx-field flex-row">
<div class="dx-field-label">ShipTo Account</div>
<div class="dx-field-value">
<select></select>
</div>
</div>
<div class="dx-field flex-row">
<div class="dx-field-label">Purchase Order</div>
<div class="dx-field-value">
<select></select>
</div>
</div>
</div>
<div class="dx-field">
<button (onClick)="click($event)">Filter</button>
</div>
</div>
</div>
Use Flexbox in your CSS: 在CSS中使用Flexbox:
.dx-fieldset.flex-column {
display: flex;
flex-direction: column;
}
.flex-row-container {
display: flex;
flex-direction: row;
}
.dx-field.flex-row {
display: flex;
flex-direction: row;
}
Here's the flexbox guide that I've used several times in the past: 这是我过去使用过几次的flexbox指南:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
您需要将组件样式设置为同一行中的某种组件,例如display: inline
或display: flex
和flex-direction: row
或display: inline-block
的包装器!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.