フォームの入力幅を応答性にするにはどうすればよいですか？

Question

こんにちは私はsearchbox htmlを持っています。スクリーンショットhttp://s16.postimg.org/utmcaczmd/Untitled.jpg を参照してください。より大きい画面のPCの場合、div id = rightsideの幅をパーセント単位で指定するため、フォーカス幅は同じ幅になり、searchboxは大きく見えます。そのため、画面のサイズが大きくなると、幅が狭すぎます。

質問：入力フォームの幅を伸縮させるにはどうすればよいですか。

#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

あなたの代わりにデモ下記パーセント

チェックのいくつかの絶対値に対処する必要がある、＃右の幅を変更します入力フィールドがどのように続くかを確認してください。

#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>

Answer 2

ここに私達は行く：.search-bar input[type="text"]については

1. は、入力フィールドに100％の幅を与えます。 box-sizing: border-box;
2. .search-barには、max-widthプロパティを100％に設定する必要があります。 =>max-width: 100%;
3. margin-leftとmargin-rightを.search-barから削除し、親要素にパディングを設定します。ここで

例です。

#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%; 
 
     }

<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>