时间戳

首页 > 解决方案 > 如何调整所有html表单元素css

html - 如何调整所有html表单元素css

问题描述

如果这个问题太愚蠢，我真的很抱歉，但我真的还没有找到解决方案，或者我没有问 google/stackoverflow 正确的问题

我是 html/css 中的真正菜鸟，我想知道如何调整此表单以使第一行中的 4 个元素与第二行之间的空间相同（https://i.stack.imgur.com /A2GST.png )

以及如何使整个表格在背景图片中居中（高宽居中）

谢谢你们。

编辑：这是代码 Css

  <style>
    #qs_category, #qs_keyword, #qs_location, #Search, #qs_country, #qs_region, #qs_price_low, #qs_price_high {
                   max-width: 200px;
                    min-width: 200px;
                }
            #quick-search{
                      height: 20px;
                      flex: 0 0 200px;
                      margin-left: 10px;
                      display: flex;
                      flex-direction: row;
                      justify-content: flex-end;
        
            }
            
    </style>

html：

<form name="qsearch" id="qsearch" method="post" action="{$live_site}/listings.php">
<div id="qs_container">
    
    <div class="qs_category qsf">
        <select name="qs_category" id="qs_category">
                <option value="">{$lng.search.all_categories}</option>
                {foreach from=$categories item=v name=cat}
                <option value="{$v.id}" {if isset($post_array.category) && $post_array.category==$v.id}selected{/if}>{$v.str}{$v.name}</option>
                {/foreach}
            </select>
    </div>
    
    <div class="qs_keyword qsf relative">
    <input type="text" name="qs_{$keyword_name}" id="qs_{$keyword_name}" placeholder="{$lng.search.search_for}" value="{if isset($post_array[$keyword_name]) && $post_array[$keyword_name]}{$post_array[$keyword_name]}{/if}"/>
    <a href="javascript:;" id="remove_qs_keyword" class="close qs_delete{if !isset($post_array[$keyword_name]) || !$post_array[$keyword_name]} hidden{/if}" ></a>
    </div>
    
    <div class="qs_location qsf relative">
    <input type="text" name="qs_location" id="qs_location" placeholder="{$lng.quick_search.location}" value="{if isset($post_array.location) && $post_array.location}{$post_array.location}{/if}"/>
    <a href="javascript:;" id="remove_qs_location" class="close qs_delete{if !isset($post_array.location) || !$post_array.location} hidden{/if}" ></a>
    </div>
    
    {if $ads_settings.enable_distance_search}
    <div class="qs_distance_search qsf">
        <select name="qs_dist" id="qs_dist" {if !isset($post_array.location) || !$post_array.location}disabled{/if}>
            <option value="0">+&nbsp;0&nbsp;{$ads_settings.ds_measuring_unit}</option>
            {foreach from=$ads_settings.array_ds_distances_list item=v name=dist}
            <option value="{$v}" {if isset($post_array.dist) && $post_array.dist==$v}selected{/if}>+&nbsp;{$v}&nbsp;{$ads_settings.ds_measuring_unit}</option>
            {/foreach}
        </select>
    </div>
    {/if}
    
    {if $ads_settings.enable_location_autosuggest}
    {foreach from=$ads_settings.address_components item = c key=k }
    {if $c.field}<input type="hidden" name="qs_{$c.field}" id="qs_{$c.field}" class="location_ac_field" value="{if isset($post_array[$c.field]) && $post_array[$c.field]}{$post_array[$c.field]}{/if}">{/if}
    {/foreach}
    {/if}
    
    {if $ads_settings.enable_distance_search}
    <input type="hidden" name="qs_lat" id="qs_lat" value="{if isset($post_array.lat) && $post_array.lat}{$post_array.lat}{/if}">
    <input type="hidden" name="qs_long" id="qs_long" value="{if isset($post_array.long) && $post_array.long}{$post_array.long}{/if}">
    {/if}
    
    <div class="search-button qsf{if $extra_fields_no} search-button-nomob{/if}"><input type="submit" name="Search" id="Search" value="{$lng.general.search}"/></div>
    
</div> {* end qs_container *}
    
{* quick search extra fields *}
{if $extra_fields_no}
<div id="qs_extended" {*{if $self_noext!="index"}style="display: none"{/if}*}>
    {foreach from=$qfields item=v name=custom}

    {if $v.type=="depending"}
    <div class="qsf" {if $v.fieldset!=0} id="li_{$v.depending.caption1}" style="display: none"{/if}>
    <select name="qs_{$v.depending.caption1}" id="qs_{$v.depending.caption1}" {if $multi_depending && in_array($v.dep_id, ','|explode:$multi_depending)}disabled="disabled"{/if} onchange="selDepending(1, 'qs_{$v.depending.caption1}', 'qs_{$v.depending.caption2}', '{$v.depending.id}', {if $multi_depending && in_array($v.dep_id, ','|explode:$multi_depending)}this.form.qs_category.value{else}0{/if}, 0, '', 0, '', '{$live_site}', '' )">
        <option value="">{$v.depending.name1}</option>
        {foreach from=$v.depending.elements item=t}
        <option value="{$t.name}">{$t.name}</option>
        {/foreach}
    </select>
    <input type="hidden" name="dep_id_qs_{$v.depending.caption1}" id="dep_id_qs_{$v.depending.caption1}" value="" />

    {* set the value for location filter if the case *}
    {if $settings.enable_locations && in_array($v.depending.caption1, $location_fields) && $location_array[$v.depending.caption1]}
    <script type="text/javascript">
    {literal}
    jQuery(document).ready(function(){
    {/literal}
        // field 1
        $('select[name="qs_{$v.depending.caption1}"]').find('option:icontains("{$location_array[$v.depending.caption1]|rawurlencode}")').attr("selected",true);
        selDepending(1, 'qs_{$v.depending.caption1}', 'qs_{$v.depending.caption2}', '{$v.depending.id}', {if $multi_depending && in_array($v.dep_id, ','|explode:$multi_depending)}this.form.qs_category.value{else}0{/if}, 0, '', 0, '', '{$live_site}', '' );

        // field2
        {if in_array($v.depending.caption2, $location_fields) && $location_array[$v.depending.caption2]}
        {literal}
        setTimeout(function() {{/literal} $('select[name="qs_{$v.depending.caption2}"]').find('option:icontains("{$location_array[$v.depending.caption2]|rawurlencode}")').attr("selected",true);{literal}}, 500);{/literal}

        {if $v.depending.no>=3}
        selDepending(1, 'qs_{$v.depending.caption2}', 'qs_{$v.depending.caption3}', '{$v.depending.id}', {if $multi_depending && in_array($v.dep_id, ','|explode:$multi_depending)}this.form.qs_category.value{else}0{/if}, 0, '', 0, '', '{$live_site}', '' );

        // field3
        {if in_array($v.depending.caption3, $location_fields) && $location_array[$v.depending.caption3]}
        {literal}
        setTimeout(function() {{/literal} $('select[name="qs_{$v.depending.caption3}"]').find('option:icontains("{$location_array[$v.depending.caption3]|rawurlencode}")').attr("selected",true);{literal}}, 1000);{/literal}

        {if $v.depending.no>=4}
        selDepending(1, 'qs_{$v.depending.caption3}', 'qs_{$v.depending.caption4}', '{$v.depending.id}', {if $multi_depending && in_array($v.dep_id, ','|explode:$multi_depending)}this.form.qs_category.value{else}0{/if}, 0, '', 0, '', '{$live_site}', '' );

        // field4
        {if in_array($v.depending.caption4, $location_fields) && $location_array[$v.depending.caption4]}
        {literal}
        setTimeout(function() {{/literal} $('select[name="qs_{$v.depending.caption4}"]').find('option:icontains("{$location_array[$v.depending.caption4]|rawurlencode}")').attr("selected",true);{literal}}, 1000);{/literal}

        {if $v.depending.no>=5}
        selDepending(1, 'qs_{$v.depending.caption4}', 'qs_{$v.depending.caption5}', '{$v.depending.id}', {if $multi_depending && in_array($v.dep_id, ','|explode:$multi_depending)}this.form.qs_category.value{else}0{/if}, 0, '', 0, '', '{$live_site}', '' );
        
        {/if} {* end if 5 fields *}

        {/if} {* end if field4 in location array *}

        {/if} {* end if 4 fields *}

        {/if}{* end if field3 in location array *}

        {/if} {* end if no  >=3 *}
    
        {/if}{* end if field2 in location array *}

        {literal}

    });
    {/literal}
    </script>
    {/if}
    {* end set the value for location filter if the case *}

    </div>
    <div class="qsf" {if $v.fieldset!=0} id="li_{$v.depending.caption2}" style="display: none"{/if}>
    <select disabled='disabled' name="qs_{$v.depending.caption2}" id="qs_{$v.depending.caption2}" 
    {if $v.depending.no>=3}onchange="selDepending(2, 'qs_{$v.depending.caption2}', 'qs_{$v.depending.caption3}', '{$v.depending.id}', 0, 0, '', 0, '' , '{$live_site}', 'dep_id_qs_{$v.depending.caption1}')"{/if}>
        <option value="">{$v.depending.name2}</option>
    </select><input type="hidden" name="dep_id_qs_{$v.depending.caption2}" id="dep_id_qs_{$v.depending.caption2}" value="" />

{if $v.depending.no>=3}
    </div>
    <div class="qsf" {if $v.fieldset!=0} id="li_{$v.depending.caption3}" style="display: none"{/if}>
    <select disabled='disabled' name="qs_{$v.depending.caption3}" id="qs_{$v.depending.caption3}" {if $v.depending.no>=4}onchange="selDepending(3, 'qs_{$v.depending.caption3}', 'qs_{$v.depending.caption4}', '{$v.depending.id}', 0, 0, '', 0, '', '{$live_site}', 'dep_id_qs_{$v.depending.caption2}' )"{/if}>
        <option value="">{$v.depending.name3}</option>
    </select></span><input type="hidden" name="dep_id_qs_{$v.depending.caption3}" id="dep_id_qs_{$v.depending.caption3}" value="" />

{/if}

{if $v.depending.no>=4}
    </div>
    <div class="qsf" {if $v.fieldset!=0} id="li_{$v.depending.caption4}" style="display: none"{/if}>
    <select disabled='disabled' name="qs_{$v.depending.caption4}" id="qs_{$v.depending.caption4}" {if $v.depending.no>=5}onchange="selDepending(4, 'qs_{$v.depending.caption4}', 'qs_{$v.depending.caption5}', '{$v.depending.id}', 0, 0, '', 0, '', '{$live_site}', 'dep_id_qs_{$v.depending.caption3}' )"{/if}>
        <option value="">{$v.depending.name4}</option>
    </select>

{/if}

{if $v.depending.no>=5}
    </div>
    <div class="qsf" {if $v.fieldset!=0} id="li_{$v.depending.caption5}" style="display: none"{/if}>
    <select disabled='disabled' name="qs_{$v.depending.caption5}" id="qs_{$v.depending.caption5}">
        <option value="">{$v.depending.name5}</option>
    </select>

{/if}
    </div>

    {else}

    {if $v.type=="textbox" || $v.type=="url" || $v.type=="email" || ($v.type=="price" && $ads_settings.enable_price) || !in_array($v.type, $default_fields_types) }
        <div class="qsf" {if $v.fieldset!=0} id="li_{$v.caption}{if $v.search_type==2}_low{/if}" style="display: none"{/if}>
        {if $v.prefix!=""} {$v.prefix} {/if}

        {if $v.search_type==2}

        {if $v.is_numeric && $v.search_elements}
        <select id="qs_{$v.caption}_low" name="qs_{$v.caption}_low">
            <option value="">- {$lng.general.min} {$v.name} -</option>
            {foreach from=$v.search_elements_array item=t}
            <option value="{$t|replace:',':''|replace:'.':''}">{$t}</option>
            {/foreach}
        </select>
        </div>
        <div class="qsf" {if $v.fieldset!=0} id="li_{$v.caption}_high" style="display: none"{/if}>
        <select id="qs_{$v.caption}_high" name="qs_{$v.caption}_high">
            <option value="">- {$lng.general.max} {$v.name} -</option>
            {foreach from=$v.search_elements_array item=t}
            <option value="{$t|replace:',':''|replace:'.':''}">{$t}</option>
            {/foreach}
        </select>
        {else}
        <input name="qs_{$v.caption}_low" id="qs_{$v.caption}_low" type="text" size="{$v.size}" placeholder="- {$lng.general.min} {$v.name} -"/>
        &nbsp;{$lng.advanced_search.to}&nbsp;
        <input name="qs_{$v.caption}_high" id="qs_{$v.caption}_high" type="text" size="{$v.size}" placeholder="- {$lng.general.max} {$v.name} -"/>
        {/if}

        {else}

        <input name="qs_{$v.caption}" id="qs_{$v.caption}" type="text" size="{$v.size}" placeholder="{$v.name}"/>
        {/if}

        </div>

    {elseif $v.type=="menu"}
        <div class="qsf" {if $v.fieldset!=0} id="li_{$v.caption}{if $v.search_type==2}_low{/if}" style="display: none"{/if}>
        {if $v.prefix!=""} {$v.prefix} {/if}

        {if $v.search_type==2}

        <select id="qs_{$v.caption}_low" name="qs_{$v.caption}_low">
            <option value="">- {$lng.general.min} {$v.name} -</option>
            {foreach from=$v.elements_array item=t}
            <option value="{$t}">{$t}</option>
            {/foreach}
        </select>
        </div>  
        <div class="qsf" {if $v.fieldset!=0} id="li_{$v.caption}_high" style="display: none"{/if}>
        <select id="qs_{$v.caption}_high" name="qs_{$v.caption}_high">
            <option value="">- {$lng.general.max} {$v.name} -</option>
            {foreach from=$v.elements_array item=t}
            <option value="{$t}">{$t}</option>
            {/foreach}
        </select>

        {else}

        <select id="qs_{$v.caption}" name="qs_{$v.caption}">
            <option value="">{$v.name}</option>
            {foreach from=$v.elements_array item=t}
            <option value="{$t}"{if $settings.enable_locations && in_array($v.caption, $location_fields) && $location_array[$v.caption]==$t}selected="selected"{/if}>{$t}</option>
            {/foreach}
        </select>
        {/if}

        {if $v.postfix!=""} {$v.postfix} {/if}
        </div>

    {elseif $v.type=="date"}
        <div class="qsf" {if $v.fieldset!=0} id="li_{$v.caption}" style="display: none"{/if}>
        {if $v.prefix!=""} {$v.prefix} {/if}

        {if $v.search_type==2}

        {include file="data/qs_date-interval.html"}

        <input name="qs_{$v.caption}_low_vis" id="qs_{$v.caption}_low_vis" type="text" size="{$v.size}" placeholder="- {$lng.general.min} {$v.name} -" {if $v.fieldset!=0}disabled="disabled"{/if} />
        &nbsp;{$lng.advanced_search.to}&nbsp;
        <input name="qs_{$v.caption}_high_vis" id="qs_{$v.caption}_high_vis" type="text" size="{$v.size}" placeholder="- {$lng.general.max} {$v.name} -" 
        {if $v.fieldset!=0}disabled="disabled"{/if} />

        <input type="hidden" name="qs_{$v.caption}_low" id="qs_{$v.caption}_low" />
        <input type="hidden" name="qs_{$v.caption}_high" id="qs_{$v.caption}_high" />
        {else}

        <input name="qs_{$v.caption}_vis" id="qs_{$v.caption}_vis" type="text" size="{$v.size}" placeholder="{$v.name}" {if $v.fieldset!=0}disabled="disabled"{/if} />

        <input type="hidden" name="qs_{$v.caption}" id="qs_{$v.caption}" />
        {include file="data/qs_date.html"}

        {/if}
        </div>

    {elseif $v.type=="radio"}
        <div class="qsf" {if $v.fieldset!=0} id="li_{$v.caption}" style="display: none"{/if}>
        {foreach from=$v.elements_array item=t}
            <input name="qs_{$v.caption}" type="radio" class="noborder" value="{$t}" {if $v.default_val!='' && $v.default_val==$t} checked="checked" {/if} />&nbsp;
            {if $v.prefix!=""} {$v.prefix} {/if}
            {$t}
            {if $v.postfix!=""} {$v.postfix} {/if}
        {/foreach}  
        </div>
    {elseif $v.type=="checkbox"}
        <div class="qsf" {if $v.fieldset!=0} id="li_{$v.caption}" style="display: none"{/if}>
        {$v.name}&nbsp;<input name="qs_{$v.caption}" type="radio" value="1" class="noborder"/>&nbsp;{$lng.general.Yes}&nbsp;&nbsp;<input name="qs_{$v.caption}" type="radio" value="0" class="noborder"/>&nbsp;{$lng.general.No}
        </div>
        </li>
    {/if}

    {/if}

    {/foreach}

    </div> {* end qs_extended *}

<div class="search-button search-button-mob qsf"><input type="submit" name="Search1" id="Search1" value="{$lng.general.search}"/></div>

{/if} {* end if fields count *}

<div class="clearfix"></div>
    <input type="hidden" name="order" value="date_updated" />
    <input type="hidden" name="order_way" value="desc" />
    
</form>

标签： htmlcss

解决方案

我会尝试：

#qsearch * > * {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

推荐阅读