通过将 label 设置为 block 显示并指定 width，可强制其占据固定水平空间，从而确保多行表单中标签左对齐、输入框纵向整齐排列。
在构建类似 Google 高级搜索的表单时，语义清晰的 <label> 元素不仅提升可访问性，还需具备一致的视觉布局。默认情况下，<label> 是内联元素（inline），其宽度由内容决定，导致“all these words:”“none of these words:”等长度差异较大的文本无法对齐，进而影响后续 <input> 的垂直列对齐。
核心解决方案：将 label 转为块级元素并设定固定宽度
只需在 CSS 中为 .adv_search_option_lbl 添加 display: block 和明确的 width 值（如 140px），即可让所有标签占据相同水平空间，并自然左对齐：
.adv_search_option_lbl {
font-size: 10px;
height: 50px;
display: block; /* 关键：脱离内联流，支持宽高控制 */
width: 140px; /* 推荐值：略大于最长标签文本（如 "this exact word or phrase:"） */
margin-right: 8px; /* 可选：为 input 留出间距 */
vertical-align: top;
box-sizing: border-box; /* 确保 padding/border 不额外增加宽度 */
}同时，为保证输入框与标签垂直居中对齐，建议统一父容器布局方式。推荐使用 Flexbox 行内对齐（而非仅靠 block + width）：
#adv_search_options_body > div {
display: flex;
align-items: center; /* 垂直居中 label 与 input */
margin-bottom: 12px;
}
/* 使 label 和 input 在同一行合理分布 */
.adv_search_option_lbl {
flex: 0 0 140px; /* 不伸缩、不压缩、固定 140px 宽度 */
margin-right: 8px;
font-size: 10px;
line-height: 1.4;
}
.adv_search_input_txt {
flex: 1; /* 输入框自动填满剩余空间 */
padding: 4px 6px;
font-size: 10px;
border: 1px solid #ccc;
border-radius: 2px;
}✅ 注意事项 避免仅依赖 height 控制 label 高度：若文本换行或字体渲染差异，可能造成截断；优先用 line-height + padding 控制行高。 width 值需基于最长标签内容测试（建议用浏览器开发者工具测量实际渲染宽度后上浮 10–15px）。 若需响应式适配，可用 min-width 替代 width，或结合 @media 调整不同断点下的宽度。 切勿遗漏 for 属性与 input 的 id 匹配（当前 HTML 中 <input for="as_epq"> 缺少对应 id="as_epq"，会削弱可访问性）。
最终效果：所有标签严格左对齐，输入框纵向成列，提示文字（.adv_search_hint_lbl）可保持 inline 布局置于下方，整体结构清晰、专业且符合现代 Web 标准。
