Question 44379 in Html Question posted in
Some basic documentation can be found here.

How to assign/set a fixed width to a label (or element?) despite its content – Html

I want to recreate Google Advanced Search page, in which there is form to enter 4 inputs: I want the label of the forms to be aligned. This is html page (the element I want to make of a fixed width is 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>

And this is the 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;
}

Any advice?

I want to align the adv_search_input elements.

Tags:

2

Answers


  1. 0

    If you want to give a fixed width to an element display the element as a block element and add the width to the css:

    For example if the width of .adv_search_option_lbl needs to be 100px:

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

    This also works for the other elements, just make it a block element and you can control the dimensions.

    Login or Signup to reply.
  2. 0

    Is this what you are looking for

    HTML

    <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;
    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search