### HTML/CSS 表单设计：标签文字左对齐且输入框盒子右对齐 要实现表单中 `label` 标签的文字左对齐，而对应的 `input` 输入框保持右对齐的效果，可以通过 CSS 的布局属性来完成。以下是具体的解决方案： #### 使用 Flexbox 布局 Flexbox 是一种强大的布局工具，可以轻松实现复杂的排列需求。 ```css .form-group { display: flex; align-items: center; /* 垂直居中 */ } .form-group label { text-align: left; /* 标签文字左对齐 */ width: 150px; /* 设置固定宽度以便对齐 */ } .form-group input { margin-left: auto; /* 将输入框推至右侧 */ } ``` 通过上述代码，`.form-group` 容器采用 Flexbox 布局，其中 `label` 被赋予固定的宽度并设置为左对齐，而 `input` 则利用 `margin-left: auto` 推向容器的右边[^1]。 --- #### 使用 Inline-Block 和 Margin 自动调整 另一种方式是基于传统的 `inline-block` 属性配合自动外边距。 ```html <div class="form-item"> <label for="username" style="display: inline-block; width: 150px; text-align: left;">用户名：</label> <input type="text" id="username" style="margin-left: auto;"> </div> ``` 在此方案中，`label` 被定义为 `inline-block` 并设置了固定宽度以确保其内容左对齐。同时，`input` 的左侧外边距被设为 `auto` 来使其靠右放置[^2]。 --- #### Ant Design 中的 Form 配置 如果项目正在使用 Ant Design，则可以直接配置 `Form.Item` 组件的相关参数来满足这一需求。 ```javascript const formItemLayout = { labelCol: { span: 8 }, // 控制 Label 所占列数 wrapperCol: { span: 16 } // 控制 Input 所占列数 }; <Form {...formItemLayout}> <Form.Item label="用户名：" name="username"> <Input /> </Form.Item> </Form>; ``` 在该场景下，`labelCol` 可用于指定 `Label` 占据的空间大小，从而间接控制其对齐效果。默认情况下，Ant Design 支持自定义样式覆盖，默认行为已经支持灵活调整[^4]。 --- #### 结合 Grid 系统 (Bootstrap 或其他框架) 对于更复杂的需求，也可以借助前端框架（如 Bootstrap）中的栅格系统。 ```html <div class="row align-items-center"> <div class="col-md-3 text-start"> <!-- 左侧区域 --> <label>用户名：</label> </div> <div class="col-md-9 ms-auto"> <!-- 右侧区域 --> <input type="text" class="form-control w-50"> </div> </div> ``` 这里的关键在于 `.ms-auto` 类的应用，它会将右侧的内容尽可能推向父级容器的边缘[^3]。 --- ### 总结 以上提供了多种实现方法，具体选择取决于项目的实际技术栈以及个人偏好。无论是纯手写 CSS 还是依赖第三方库，都可以达到预期目标。