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

【问题标题】：How to make input type text auto-expand also set specific width expand.如何使输入类型文本自动扩展还设置特定宽度扩展。
【发布时间】：2014-04-08 20:12:23
【问题描述】：

我有一个搜索字段没有像我想要的那样对齐这是代码

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

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

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

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

【问题讨论】：

在这里查看我关于 flex 和 flex-grow 的回答：stackoverflow.com/a/52975265/1599699

标签： css alignment css-position

【解决方案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); 
    }); 
});

【讨论】：

$('#keywords').on('keydown', function(e) { var minSize = 20; var maxSize = 50; var chars = $(this).val().length ; $(this).attr('size', Math.min(Math.max(chars, minSize), maxSize)); })

【解决方案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 的值来满足您的需求。

【讨论】：