如何为adv_search_option_lbl设置固定宽度以对齐输入框？

要让所有adv_search_input输入框对齐，核心是给类.adv_search_option_lbl设置固定宽度，并调整表单行的布局，具体实现如下：

1. 修正HTML的两处问题 #

• input标签的for属性属于冗余（for应绑定在label上，对应input的id），且存在重复的class属性，需合并
• 给每个input添加唯一id，对应label的for属性（符合语义化规范）

修正后的HTML代码：

<div id="adv_search_options_body">
    <div>
        <label class="adv_search_option_lbl" for="as_epq">all these words:</label>
        <input id="as_epq" class="adv_search_input adv_search_input_txt" type="text">
        <label class="adv_search_hint_lbl">Type the important words: "<span class="adv_search_hint_ie">tri-colour rat terrier</span>"</label>
    </div>
    <div>
        <label class="adv_search_option_lbl" for="as_q">this exact word or phrase:</label>
        <input id="as_q" class="adv_search_input adv_search_input_txt" type="text">
        <label class="adv_search_hint_lbl">Put exact words in quotes: "<span class="adv_search_hint_ie">"rat terrier"</span>"</label>
    </div>
    <div>
        <label class="adv_search_option_lbl" for="as_oq">any of these words:</label>
        <input id="as_oq" class="adv_search_input adv_search_input_txt" type="text">
        <label class="adv_search_hint_lbl">Type OR between all the words you want: "<span class="adv_search_hint_ie">miniature OR standard</span>"</label>
    </div>
    <div>
        <label class="adv_search_option_lbl" for="as_eq">none of these words:</label>
        <input id="as_eq" class="adv_search_input adv_search_input_txt" type="text">
        <label class="adv_search_hint_lbl">Put a minus sign just before words that you don't want: "<span class="adv_search_hint_ie">-rodent, -"Jack Russell"</span>"</label>
    </div>
</div>

2. 修改CSS实现对齐效果 #

• 给.adv_search_option_lbl设置固定宽度（可根据最长标签调整），并设置右对齐，让输入框起点一致
• 给每个表单行设置display: flex，实现水平布局并垂直居中元素
• 统一输入框宽度，强化对齐视觉效果

修改后的CSS代码：

.adv_search_option_lbl {
    font-size: 10px;
    width: 180px; /* 固定宽度确保所有标签对齐 */
    text-align: right; /* 模拟Google标签右对齐样式 */
    margin-right: 10px; /* 与输入框保持合理间距 */
}

.adv_search_input {
    width: 300px; /* 统一输入框宽度 */
    margin-right: 10px; /* 与提示文字保持间距 */
}

.adv_search_hint_lbl {
    font-size: 9px;
    color: #545454; /* 匹配Google提示文字的灰色调 */
}

.adv_search_hint_ie {
    font-family: monospace;
}

#adv_search_options_body {
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 12px; /* 表单行之间的间距，替代justify-content更直观 */
    margin-bottom: 10px;
}

#adv_search_options_body > div {
    display: flex;
    align-items: center; /* 垂直居中标签、输入框和提示文字 */
}

效果说明 #

固定宽度的标签会占据相同水平空间，输入框自动对齐到同一垂直起点；右对齐标签+垂直居中布局，完全复刻Google高级搜索的表单样式。

内容的提问来源于stack exchange，提问作者Daniel Proaño