Question

如果您访问Google 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

Answer 1

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

喜欢

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

Answer 2

我使用display:flex来实现元素的可变长度。

请参阅以下链接以获得更好的解释

FlexBox

Play Store SearchBar可变宽度

2 个答案: