如何使输入类型文本自动展开也设置特定宽度扩展。

Question

我有一个不符合我想要的搜索字段 这是代码

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

所以我希望搜索位于屏幕的右侧，但最大为1280像素，否则保持对齐为1280像素（屏幕中心）

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

XXXXXX ---------------------- 1280px ---------- [搜索] XXXXXX

Answer 1

检查您的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（库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); 
    }); 
}); 

Answer 2

您可以使用CSS3 media queries根据屏幕分辨率调整search field的位置。

您可以在此MDN link了解更多相关信息。

现在针对这个问题，你问CSS只有这样的解决方案。

@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;
    }
} 

您可以查看此JSfillde link了解演示

PS：您可能想要使用margin的值来满足您的需求。