如何将单选按钮与下拉框及标签对齐？附代码求修改方案

我希望将单选按钮与下拉框及标签在同一行对齐，同时也想让单选按钮与自身标签对齐，原本以为它们会自动对齐，但实际未实现。以下是我的HTML和CSS代码，请问需要做哪些修改才能让单选按钮与下拉框标签处于同一行？

原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)">&gt; 
      </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; }

问题分析与解决方案 #

你的代码主要有两个核心问题：一是Bootstrap栅格类缺失class属性导致布局失效，二是用float控制布局会破坏垂直对齐逻辑。我给你整理了一套简洁的修正方案：

1. 修复HTML结构与对齐逻辑 #

<div class="row align-items-center">
  <!-- 第一组：数据源单选按钮 + 下拉框 -->
  <div class="col-sm-5 d-flex align-items-center">
    <div class="dataSource me-2">
      <input id="qa-datasource" type="radio" (click)="onDataSource()" [checked]="true" />
      <span>Data Source</span>
    </div>
    <div class="flex-grow-1">
      <kendo-dropdownlist id="qa-datasourcedropdown" [data]='dataSource' [(ngModel)]="selectedDataSource" [disabled]="isDataSourceDisabled" (selectionChange)="dataSourceTable()">
      </kendo-dropdownlist>
    </div>
  </div>

  <div class="col-sm-2"></div>

  <!-- 第二组：连接器单选按钮 + 下拉框 -->
  <div class="col-sm-5 d-flex align-items-center">
    <div class="connectorBasedTarget me-2">
      <input type="radio" id="qa-connectorbasedtarget" (click)="onConnectorTarget()" />
      <span>Connector-Based Target</span>
    </div>
    <div class="flex-grow-1">
      <kendo-dropdownlist id="qa-connectordropdown" [data]="targetList" [disabled]="isConnectorTargetDisabled" (selectionChange)="selectConnectorBasedTarget($event)">
      </kendo-dropdownlist>
    </div>
  </div>
</div>

2. 简化CSS样式 #

/* 仅保留必要的间距样式，用Flex布局替代浮动 */
.dataSource {
  margin-left: 2px;
}
.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;
}

关键改动说明 #

• 修复了Bootstrap栅格类的class缺失问题（比如<div col-sm-5>改为<div class="col-sm-5">），这是布局生效的基础。
• 使用Bootstrap的Flex类（d-flex、align-items-center）实现垂直居中，替代原来的float和padding-top，避免布局错位。
• 用me-2类给单选按钮容器和下拉框添加右侧间距，替代 ，样式更可控。
• 移除了重复的id="radio1"（同一页面id必须唯一，否则会导致JS选择元素出错）。

这样修改后，单选按钮、标签和下拉框就能完美在同一行对齐，且单选按钮与自身标签也能垂直居中啦！

内容的提问来源于stack exchange，提问作者Onkar Nirhali