[英]How can I align the radio button in a line to the dropdown and the label?
I want the radio button to be lined up along with the label how can I do it?我希望单选按钮与 label 一起排列,我该怎么做? I thought it would be aligned automatically我以为它会自动对齐
Below is the code for the HTML side, what changes can I make so that the radio buttons can be in the same line as that of the dropdown label下面是 HTML 端的代码,我可以进行哪些更改以使单选按钮与下拉菜单 label 位于同一行
<div class="row">
<div col-sm-5>
<div class="dataSource"><input id="qa-datasource" type="radio" (click)="onDataSource()"
[checked]="true" id="radio1"/>
<span>Data Source</span>
</div>
<div col-sm-6 style="float: left">
<kendo-dropdownlist id="qa-datasourcedropdown" [data]='dataSource' [(ngModel)]="selectedDataSource"
[disabled]="isDataSourceDisabled" (selectionChange)="dataSourceTable()">
</kendo-dropdownlist>
</div>
</div>
<div class="col-sm-2"></div>
<div col-sm-5>
<div style="float: left" class="connectorBasedTarget"><input type="radio" id="qa-connectorbasedtarget"
(click)="onConnectorTarget()" id="radio1" />
<span>Connector-BasedTarget </span>
</div>
<div style="float: left">
<kendo-dropdownlist id="qa-connectordropdown" [data]="targetList" [disabled]="isConnectorTargetDisabled"
(selectionChange)="selectConnectorBasedTarget($event)">>
</kendo-dropdownlist>
</div>
</div>
</div>
and below is the code for CSS以下是 CSS 的代码
.connectorBasedTarget {
margin-top: 5px;
}
.dataSource {
margin-left: 2px;
float: left;
padding-top: 4px;
}
.row {
margin-right: 10px;
margin-left: 4px;
padding-left: 2%;
.rowTable {
margin-top: 8px;
line-height: 1;
.dataSourceTable {
padding-left: 58px;
margin-top: 10px;
float: left;
}
.cnctrDropDown {
float: left;
margin-left: 12px;
}
.connectorBasedTargetTable {
padding-left: 5px;
margin-top: 10px;
float: left;
margin-left: 121px;
}
}
When it comes to aligning radio buttons with labels, I apply the following to the parent container, which in your case would be:在将单选按钮与标签对齐时,我将以下内容应用于父容器,在您的情况下是:
.dataSource {
display: flex;
align-items: center;
}
So the problem was solved with the hint I got from the above suggestion I just had to add the line display: flex;
所以问题解决了,我从上面的建议中得到了提示,我只需要添加行display: flex;
to both the CSS classes which were responsible for the alignment.到负责 alignment 的 CSS 类。 So my CSS classes looked something like this所以我的 CSS 类看起来像这样
.dataSource {
margin-left: 2px;
float: left;
padding-top: 4px;
display: flex;
}
.connectorBasedTarget {
margin-top: 5px;
display: flex;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.