html - Play Store SearchBar 可变宽度-6ren

html - Play Store SearchBar 可变宽度

转载作者：行者123 更新时间：2023-11-28 08:06:17

26

4

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

最佳答案

简单的方法是你需要设置3个不同的宽度max-width、min-widtht和actual width

喜欢

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

关于html - Play Store SearchBar 可变宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29472209/

26

4

0

文章推荐： c++ - 从文本文件中获取指令

文章推荐： javascript - AngularJS 和 RequireJS - 未捕获错误 : No module: MyApp

文章推荐： c++ - 给出数字列表以确定哪个组合为您提供给定值

文章推荐： ios - 单击取消按钮时隐藏 searchController searchBar

java - SearchBar 与 TabLayout 和 Viewpager。 SearchBar (EditText) 不会过滤用户，也不会过滤事件
我的 SearchFragment 是另外两个 Fragment 的宿主 Fragment:SearchUsersFragment 和 SearchEventsFragment。我的组织方式是 Tab
ios - tableView.tableHeaderView = UISearchDisplayController.searchBar;并调用 setContentInset : ; searchBar is not drawn when i scroll the table
tableView.tableHeaderView = UISearchDisplayController.searchBar;并调用 setContentInset: ; 当我滚动表格时，没有绘制
没有点击按钮的Android SearchBar
我一直在努力寻找答案，但也许我没有正确地询问谷歌，所以它是这样的:我的 Android 应用程序中有一个搜索 View ，其中有顶部菜单项作为搜索输入，等等。我点击放大镜，然后文本字段变为可编辑的搜索
Swift SearchBar 无法过滤数据
我已经设置了 UISearchBar 的东西。但我收到错误消息。 Cannot assign value of type '[cellData]' to type '[String]' 这是代码 st
IOS Searchbar 返回错误数据
我正在疯狂地尝试让我的 IOS 搜索栏在 Iphone 上工作。我从远程服务器访问数据并填充内容文件。然后我做了一个过滤器，它创建了一个过滤后的内容文件。然后我执行 [self.tableView r
ios - SearchBar 在过滤时忽略字符
我有一个 tableView，其中填充了一个 String 类型的数组。字符串中的某些单词包含连字符 (-)。我知道我可以过滤一个 tableView 并在需要时让它删除这个字符。是否可以在搜索过程中
ios - SearchBar 在事件时移动
我有一个带有 SegmentedControl、UITableView 和 UISearchController 的 UIViewController。 SegmentedControl 位于主视图的
ios - 使用未声明的标识符 searchBar
当我像这样将 searchBar 对象调用到 UISearchBar 委托(delegate)方法中时，它工作正常: -(void)searchBarSearchButtonClicked:(UISe
swift - SearchBar 显示错误的事件
我的 SearchBar 有这段代码可以更改我的收藏 View : extension ProductsCollectionViewController : UISearchControllerDel
ios - 包含可选的过滤器数组 - SearchBar
只是一些后见之明，让您了解我的问题。我目前正在为我在设备上保存了 GuestList CoreData 的事件编写 iOS 应用程序。在 viewDidLoad 上，它会获取 coredata 对象
ios - 索引超出范围发生在 searchBar
我正在按照本教程了解如何启动和运行 searchBar。教程: https://www.raywenderlich.com/113772/uisearchcontroller-tutorial 我完
ios - 如何在表头中实现 SearchBar NOT
我正在尝试对我的应用实现搜索。以前看了好几个教程，都推荐把Search Bar放到Table Header: self.tableView.tableHeaderView = self.searchC
ios - SearchBar，如何改变文字颜色？
我的搜索栏有默认的灰色文本，但我希望它是白色文本。我无法弄清楚如何使用 swift 来更改范围栏文本颜色，而且您无法从 Storyboard 中执行此操作。我找到的最接近的是 searchBarOut
Swift SearchBar- [general] 与守护进程的连接无效
我刚刚在我的程序中添加了一个 ui 搜索栏，每次我重新运行该程序时，我都会收到错误消息 -[一般] 与守护程序的连接无效尽管如此，我的应用程序仍能完美运行，而且我似乎无法分辨出哪里出了问题。有谁知道
iPhone : hide a scopeBar from a searchBar
我又会显得很傻了，但这总比发疯好!这是我的问题。我有一个 UISearchBar，其中有一个我想隐藏的scopeBar。我这样做: searchBar.showsScopeBar = NO; 我也调用
uitableview - 向 searchBar 添加索引
需要帮助来更正此代码。我有一个带有餐厅名称和地址的核心数据应用程序，有一个搜索栏，它正在运行。我要添加的是一个 Index 和一个 IndexTitle，如下图(箭头)所示。非常欢迎任何帮助。提前
iOS - SearchDisplayController - SearchBar 样式
我正在使用 SearchDisplayController 并希望将样式或色调应用于 searchBar。但我注意到 SearchDisplayController 更改了我的 searchBar
ios - Swift SearchBar 如何在以编程方式更改后获取原始搜索图标
我当前使用searchBar，我将左侧图标更改为自定义 UIImageView。当按下按钮时我想将其改回原来的搜索图标。 //my custom search iconBar searchBar.se
Android TV - SearchBar 焦点
我在我的电视应用程序中使用自定义搜索屏幕，我的问题是我无法在启动 fragment 时将焦点设置在 SearchBar View 上。我尝试了以下方法: mSearchBar.setFocusable
android:如何在ListView中通过edittext(searchbar)搜索行
我想在输入 edittext 内容的 ListView 行中搜索相关的 Row。如何在 Listview 中获取行..请给我示例代码.. 谢谢最佳答案我假设您想根据您键入的 edittext 值

首页

博学

6Ren·AI

商城

html - Play Store SearchBar 可变宽度