边城闪侠
边城闪侠
  • 发布:2014-12-17 20:54
  • 更新:2018-04-25 10:28
  • 阅读:15644

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

分类:MUI

我在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 负责人:无 分享
已邀请:
南门看守者

南门看守者

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

chenqp

chenqp

也有这个问题

chenqp

chenqp

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

冷

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

  • hertical

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

    2015-01-12 10:25

Brave丶芒果

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

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>

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