Play商店SearchBar可变宽度

如果您访问Google Play商店网站，您会注意到，如果更改窗口宽度，则顶部的SearchBar宽度会发生变化。Play商店SearchBar可变宽度

有人请给我一个例子，说明如何使用HTML和CSS来实现这种可变宽度行为吗？

CSS

 body { 
     margin:0; 
     min-width:960px; 
    } 
    #upperbar { 
     background-color:#F1F1F1; 
     white-space:nowrap; 
     height:60px; 
     width:100%; 
    } 
    #logobardiv { 
     margin:10px 20px 10px 30px; 
     display:inline-block; 
    } 
    #logo { 
     height:39px; 
     width:183px; 
    } 
    #searchbardiv { 
     font-size:0; 
     display:inline-block; 
     height:100%; 
     padding-left:10px; 
     vertical-align:middle; 
     white-space:nowrap; 
     min-width:200px; 
    } 
    #searchbar { 
     height:28px; 
     /*max-width:589px;*/ 
     max-width:100%; 
     width:589px; 
     min-width:545px; 
     font-size:16px; 
     border:1px solid #A8A8A8; 
     border-right:none; 
     display:inline-block; 
     vertical-align:middle; 
    } 
    #searchbar:hover { 
     border:1px solid black; 
     border-right:none; 
    } 
    ::-webkit-input-placeholder { 
     color:#A9A9A9; 
     padding:0 0 0 7px; 
    } 
    #searchbutton { 
     vertical-align:middle; 
     background:#4584F0; 
     height:28px; 
     width:60px; 
     display:inline-block; 
     border:1px solid transparent; 
     border-top-right-radius:2px; 
     border-bottom-right-radius:2px; 
     padding:0; 
     margin:0; 
     outline:none; 
     white-space:nowrap; 
    } 
    #searchbuttonimg { 
     vertical-align:middle; 
     background:url(images/search.png) no-repeat center; 
     display:inline-block; 
     height:100%; 
     width:26px; 
    } 
    #signindiv { 
     display:inline-block; 
     height:100%; 
     white-space:nowrap; 
     vertical-align:middle; 
    } 
    #appsimg { 
     display:inline-block; 
     vertical-align:middle; 
    }

HTML

<body> 
<div class="container"> 
    <div id="upperbar"> 
     <div id="logobardiv"> 
      <img id="logo" src="https://www.gstatic.com/android/market_images/web/play_logo_x2.png" /> 
     </div> 
     <div id="searchbardiv"> 
      <input id="searchbar" type="text" placeholder="Search" /> 
      <button id="searchbutton"> <span id="searchbuttonimg"></span> 

      </button> 
     </div> 
     <div id="signindiv"> 
      <img id="appsimg" src="images/apps.png" /> 
     </div> 
    </div> 
</div>

JSFiddle

来源

2015-04-06 Flake

我用display:flex实现元件的可变长度。

请参考下面的链接，一个很好的解释

FlexBox

Play商店网站

来源

2015-04-17 14:30:41 Flake

简单的方法就是，你需要设置3个不同宽度的最大宽度，最小widtht和实际宽度

像

input{ 
max-width:100%; 
min-width:300px; 
width:800px; 
}

来源

2015-04-06 13:45:06 Muthukumar

，输入被改变宽度，但我不能让它与上面的代码 – Flake 2015-04-06 17:17:33

做让我们检查的https： //jsfiddle.net/Muthukumaru/Lyz5chs3/1/听到它只对窗口大小<600px和窗口大小> 300px负责。我们可以改变这些尺寸。在游戏商店以及这发生它不负责任何窗口大小他们设置限制。 – Muthukumar 2015-04-07 06:04:10

Play商店SearchBar可变宽度

回答

相关问题