How to make input type text auto-expand also set specific width expand.

问题

I have a search field which doesn't align like i want to Here is the code

#menu_search{
    position: absolute;
    width: 100%;
    max-width: 1280px;
    display: inline; 
    float: right;
    right: 0px;
    z-index: 99;
}

So i want the search to be in the right part of the screen but only for max 1280 px, otherwise to maintain the alignment to 1280px (center of screen)

--------------------------------1480px-----------------------------

XXXXXX----------------------1280px----------[search]XXXXXX

回答1:

check your jsFiddle

HTML

 <input id="menu_search" type="text" size="20" placeholder="search here..." />

CSS

#menu_search{
    position: absolute;
    width: auto;
    max-width: 1280px;
    display: inline; 
    float: right;
    right: 0px;
    z-index: 99;
}

j-Query (library 1.7.2)

$(function(){ 
    $('#menu_search').keyup(function(){ 
        var size = parseInt($(this).attr('size')); 
        var chars = $(this).val().length; 
        if(chars >= size) $(this).attr('size', chars); 
    }); 
});

回答2:

You can use the CSS3 media queries to adjust the position of the search field according to the resolution of the screen.

You can read more about them at this MDN link.

Now for the question you asked the CSS only solution will be something like this.

@media screen and(max-width: 1280px) {
    #menu_search {
        position: absolute;
        display: inline;
        align: right;
        right: 0px;
        z-index: 99;
    }
}

@media screen and(min-width: 1281px) {
    #menu_search {
        position: absolute;
        float: left;
        display: inline;
        clear: both;
        margin: 0px 40 % ;
        /*try adjusting this magin values to get it exactly in center coz its dependent on the size of your text field also*/
       broder: 1px solid black;
    }
}

You can check this JSfillde link for a demo

PS: you might want to play around with the margin's values to suit your needs.

来源：https://stackoverflow.com/questions/22220301/how-to-make-input-type-text-auto-expand-also-set-specific-width-expand

标签

css

alignment

css-position