目前mui官方只有一个搜索栏示例供参考,但是只是一个输入框而已,很多时候这并不是我们想要的。
我们有时只是想要一个常规的搜索栏:左边输入框,右边紧接一个确定按钮。
在这里分享一下,我个人的代母,效果图如下:
实现的代码:
<!-- 搜索栏 -->
<div style="display:inline-flex; width:100%; padding-left:1px; padding-right:1px;">
<div class="mui-input-row" style="height:40px; flex-grow:4;">
<input type="text" class="mui-input-clear s_font-size2" placeholder="医院名称" maxlength="100" style="height:100%; padding-right:32px;"/>
</div>
<div style="height:40px; flex-grow:1;">
<input type="button" value="搜索" class="u_btn" style="width:100%; height:100%;"/>
</div>
</div>