html - 如何将单选按钮与下拉菜单和标签对齐？

Question

我希望单选按钮与标签一起排列，我该怎么做？我以为它会自动对齐

下面是 HTML 端的代码，我可以进行哪些更改以使单选按钮与下拉标签位于同一行

<div class="row">
            <div col-sm-5>
              <div class="dataSource"><input id="qa-datasource" type="radio" (click)="onDataSource()"
                  [checked]="true" id="radio1"/>&nbsp;
                <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"  />&nbsp;
                <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>

下面是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;
    }
  }

标签： htmlcssangular

Answer 1

在将单选按钮与标签对齐时，我将以下内容应用于父容器，在您的情况下为：

.dataSource {
    display: flex;
    align-items: center;
}