KendoUI React DateRangePicker：如何将标签移至输入框左侧？

当然可以实现，具体方法分两种场景处理：

1. 利用组件库内置配置（推荐） #

如果使用的是成熟UI组件库（如Ant Design、Element UI等），大多自带标签位置的配置项，无需手写大量CSS：

• Ant Design（React）：借助Form.Item的labelCol和wrapperCol属性控制布局，让标签与输入框同行：

<Form.Item label="日期范围" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
  <DateRangePicker />
</Form.Item>

• Element UI（Vue）：给el-form设置label-position="left"即可全局控制标签居左，也可单独给el-form-item设置：

<el-form label-position="left" label-width="80px">
  <el-form-item label="日期范围">
    <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
  </el-form-item>
</el-form>

2. 自定义CSS实现（通用方案） #

如果组件库没有相关配置，或者使用的是自定义封装的DateRangePicker，可通过CSS强制调整布局：
先给标签和输入框套一个容器，再用Flex布局实现同行对齐：

<div class="date-range-wrapper">
  <span class="range-label">日期范围</span>
  <!-- 你的DateRangePicker组件 -->
  <div class="range-picker">...</div>
</div>

对应的CSS：

.date-range-wrapper {
  display: flex;
  align-items: center;
  gap: 10px; /* 标签与输入框的间距，可按需调整 */
}
.range-label {
  width: 70px; /* 固定标签宽度，让布局更整齐 */
  text-align: right;
}

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