css 如何为标签(或元素?)分配/设置固定宽度而不管其内容

twh00eeo  于 2023-03-09  发布在  其他
关注(0)|答案(2)|浏览(125)

我想重新创建谷歌高级搜索页面,其中有形式输入4输入:我希望表单的标签对齐。这是html页面(我希望使元素具有固定宽度是adv_search_option_lbl

<div id="adv_search_options_body">
    <div>
        <label **class="adv_search_option_lbl">**all these words:</label>
        <input class="adv_search_input" type="text" for="as_epq" class="adv_search_input_txt">
        <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">this exact word or phrase:</label>
        <input class="adv_search_input" type="text" for="as_q" class="adv_search_input_txt">
        <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">any of these words:</label>
        <input class="adv_search_input" type="text" for="as_oq" class="adv_search_input_txt">
        <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">none of these words:</label>
        <input class="adv_search_input" type="text" for="as_eq" class="adv_search_input_txt">
        <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>

这是CSS:

.adv_search_option_lbl {
    font-size: 10px;
    height: 50px;
}

.adv_search_hint_lbl {
    font-size: 9px;
}

.adv_search_hint_ie {
    font-family: monospace;
}

#adv_search_options_body {
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    width: 150vh;
    justify-content: space-between;
    margin-bottom:10px;
}

有什么建议吗?
我想对齐adv_search_input元素。

h43kikqp

h43kikqp1#

如果你想给予一个元素一个固定的宽度,把这个元素显示为一个块元素,然后把这个宽度加到css:
例如,如果.adv_search_option_lbl的宽度需要为100px:

.adv_search_option_lbl {
    font-size: 10px;
    height: 50px;
    display: block;
    width: 100px;
}

这也适用于其他元素,只需将其设为块元素,即可控制尺寸。

zpgglvta

zpgglvta2#

这是你要找的吗
超文本标记语言

<div id="adv_search_options_body">
    <div>
        <label class="adv_search_option_lbl">all these words:</label>
        <input class="adv_search_input" type="text" for="as_epq" class="adv_search_input_txt">
        <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">this exact word or phrase:</label>
        <input class="adv_search_input" type="text" for="as_q" class="adv_search_input_txt">
        <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">any of these words:</label>
        <input class="adv_search_input" type="text" for="as_oq" class="adv_search_input_txt">
        <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">none of these words:</label>
        <input class="adv_search_input" type="text" for="as_eq" class="adv_search_input_txt">
        <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>

中央支助系统

.adv_search_option_lbl {
    font-size: 10px;
    height: 50px;
    width: 100px;
    display: inline-block;
}

.adv_search_hint_lbl {
    font-size: 9px;
}

.adv_search_hint_ie {
    font-family: monospace;
}

#adv_search_options_body {
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom:10px;
}

相关问题