如何使表单输入宽度响应？

Question

你好我有searchbox html。看截图http://s16.postimg.org/utmcaczmd/Untitled.jpg 但是当它在更大屏幕的PC上时，焦点宽度仍将是相同的宽度，搜索框看起来会更大，因为我以百分比为单位制作div id = rightside的宽度。所以在更大的屏幕上，焦点看起来太小了。

问题：我怎样才能使输入形式的宽度也拉伸。

 #content
{
    float:left;
    margin-top:2vh;
    padding:0px;
    width:100%;
    display:flex;
    flex-direction:row;
    word-break: break-all;
}
#right-side
{
    float:left;
    margin-left:2vh;
    width:30%;
    min-height: 65vh;
    border: solid 2px #E0E0E0;
    background:white;
}

#left-side
{
    float:left;
    width:70%;
    min-height: 65vh;
    border: solid 2px #E0E0E0;
    background:white;
}
.searchbox
    {
        background: #80bfff;
        margin: 10px;
        margin-top:20px;
        padding: 5px;
        border-radius: 5px;
    }
   .search-bar 
        {
            height: 29px;
            background-color: #e1e1e1;
            -moz-border-radius: 100px;
            -webkit-border-radius: 100px;
            border-radius: 100px;
            margin-left:20px;
            margin-right:20px;
            margin-bottom:10px;

            position:relative;  
        }
        .search-bar .searchbutton 
        {
            position:absolute;
            top:23%;
            right:5px;
        }
        .sfield 
        {
            float: left;
            margin: 5px 0 0 8px;
            font: 8pt Verdana;
            color: #888;
            height: 20px;
            line-height: 18px;
            padding: 0;
            background: transparent;
            border: 0;
            max-width: 100%;
        }

              <div id="right-side">
                   <div class="searchbox">
                        <?php echo form_open('shopping/search');?>
                            <h4 style="text-align:center;"> ค้นหาสินค้า </h4>
                                <div class="search-bar">
                                    <input type="text" size="20" class="sfield" name="searchterm" value="" placeholder="Search...">
                                    <input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
                                </div>
                        <?php echo form_close();?>
                    </div>
               </div>

Answer 1

我们走了：

1. 对于.search-bar input[type="text"]，为输入字段指定宽度为100％;和box-sizing: border-box;
2. 在.search-bar中，您需要将max-width属性设置为100％。 =＆GT; max-width: 100%;
3. 从margin-left移除margin-right和.search-bar，并在父元素上设置填充。

以下是示例：

＆＃13;
＆＃13;
#content
{
    float:left;
    margin-top:2vh;
    padding:0px;
    width:100%;
    display:flex;
    flex-direction:row;
    word-break: break-all;
}
#right-side
{
    float:left;
    margin-left:2vh;
    width:90%;
    min-height: 65vh;
    border: solid 2px #E0E0E0;
    background:white;
}

#left-side
{
    float:left;
    width:70%;
    min-height: 65vh;
    border: solid 2px #E0E0E0;
    background:white;
}
.searchbox
    {
        background: #80bfff;
        margin: 10px;
        margin-top:20px;
        padding: 10px;
        border-radius: 5px;
    }
   .search-bar 
        {
            height: 29px;
            background-color: #e1e1e1;
            -moz-border-radius: 100px;
            -webkit-border-radius: 100px;
            border-radius: 100px;
            margin-bottom:10px;
          max-width: 100%;
            position:relative;  
        }
        .search-bar .searchbutton 
        {
            position:absolute;
            top:23%;
            right:5px;
        }
        .search-bar input[type="text"] {
          width: 100%;
          margin: 0;
          height: 100%;
          padding-left: 15px;
          box-sizing: border-box;
        }
        .sfield 
        {
            float: left;
            margin: 5px 0 0 8px;
            font: 8pt Verdana;
            color: #888;
            height: 20px;
            line-height: 18px;
            padding: 0;
            background: transparent;
            border: 0;
            max-width: 100%;
        }
＆＃13;
<div id="right-side">
                   <div class="searchbox">
                            <h4 style="text-align:center;"> ค้นหาสินค้า </h4>
                                <div class="search-bar">
                                    <input type="text" size="20" class="sfield" name="searchterm" value="" placeholder="Search...">
                                    <input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
                                </div>
                    </div>
               </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

你需要解决一些绝对值而不是百分比

检查下面的演示，更改＃右侧的宽度，看看输入字段如何跟随

 #content
{
    float:left;
    margin-top:2vh;
    padding:0px;
    width:100%;
    display:flex;
    flex-direction:row;
    word-break: break-all;
}
#right-side
{
    float:left;
    margin-left:2vh;
    width:30%;
    min-height: 65vh;
    border: solid 2px #E0E0E0;
    background:white;
}

#left-side
{
    float:left;
    width:70%;
    min-height: 65vh;
    border: solid 2px #E0E0E0;
    background:white;
}
.searchbox
    {
        background: #80bfff;
        margin: 10px;
        margin-top:20px;
        padding: 5px;
        border-radius: 5px;
    }
   .search-bar 
        {
            height: 29px;
            background-color: #e1e1e1;
            -moz-border-radius: 100px;
            -webkit-border-radius: 100px;
            border-radius: 100px;
            margin-left:20px;
            margin-right:20px;
            margin-bottom:10px;
            position:relative;  
            padding-right: 34px; /* <- absolute space */
        }
        .search-bar .searchbutton 
        {
            position:absolute;
            top:23%;
            right:5px;
        }
        .sfield 
        {
            float: left;
            margin: 5px 0 0 8px;
            font: 8pt Verdana;
            color: #888;
            height: 20px;
            line-height: 18px;
            padding: 0;
            background: transparent;
            border: 0;
            width: 100%; /* <- full width */
            background-color: red; /* <- to better appreciate where is the input field (and its bounds) */
        }

              <div id="right-side">
                   <div class="searchbox">
                        <?php echo form_open('shopping/search');?>
                            <h4 style="text-align:center;"> ค้นหาสินค้า </h4>
                                <div class="search-bar">
                                    <input type="text" size="20" class="sfield" name="searchterm" value="" placeholder="Search...">
                                    <input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
                                </div>
                        <?php echo form_close();?>
                    </div>
               </div>