边城闪侠

发布：2014-12-17 20:54
更新：2018-04-25 10:28
阅读：15674

如何在导航栏中添加搜索框？

分类：MUI

mui HTML5

我在header中加入了

    <header class="mui-bar mui-bar-nav">  
        <a class="mui-icon mui-icon-bars mui-pull-left"></a>  
        <div class="mui-input-row mui-search" sstyle="width:100px;">  
            <input type="search" class="mui-input-speech mui-input-clear" placeholder="输入关键词搜索">  
        </div>  
    </header>

但是搜索框显示不出来，有什么办法能让搜索框显示在导航栏上呢？

2014-12-17 20:54 负责人:无分享

9 个回复

南门看守者

搜索框在导航栏上的宽度默认是100%，而你前面又加了返回按钮，所以显示不出来，你试试把导航栏的宽度改成80%看看能显示么?

chenqp

也有这个问题

chenqp

即使不加返回按钮,搜索框的搜索符号和清除图标也有错位

冷

在最外层加一个position:relative，在搜索的外层添加position:absolute，用top，left，right控制位置就可以了。

hertical

但是怎么让那个搜索框变短呢

2015-01-12 10:25

Brave丶芒果 - 66666666666

即使不加返回按钮,搜索框的搜索符号和清除图标也有错位

小五

<header class="mui-bar mui-bar-nav">  
        <div class="mui-input-row mui-search">  
            <input id="keywords" type="search" class="mui-input-clear" placeholder="... "/>  
        </div>  
    </header>

css:
.mui-search:before{
top:60%;
}
.mui-input-row.mui-search .mui-icon-clear {
top: 0px;
right: 5px;
}

六月

做了如上修改之后还是不行啊，搜索图标依然错位，请问你解决了吗

2015-02-25 11:57

无所事事瞎折腾

也遇到了这种问题，悲催！

        <header class="mui-bar mui-bar-nav">  
            <a class="mui-icon mui-icon-bars mui-pull-left"></a>  
            <a id="info" class="mui-icon mui-icon-chat mui-pull-right" style="color: #999;"></a>  
            <div id="search" style="padding-left: 10%;width: 80%; position: absolute;">  
                <div class="mui-input-row mui-search" >  
                <input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="带语音输入的搜索框" style="padding-bottom:0px; margin-bottom: 0px ;">  
                </div>    
            </div>  
        </header>

三分天下

同问求解！！！！

9***@qq.com

css：
<style type="text/css">

search{

            position: absolute;  
            margin-left:30px ;  
            margin-top: 2px;  
            width: 85%;  
        }  
    </style>

html：
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<div class="mui-input-row mui-search" id="search">
<input id="keywords" type="search" class="mui-input-clear" placeholder=" " />
</div>
</header>

该问题目前已经被锁定, 无法添加新回复

如何在导航栏中添加搜索框？

9 个回复

search{

公告

相关问题

如何在导航栏中添加搜索框？

与内容相关的链接

9 个回复

search{

公告

相关问题