为什么搜索图标使用jquery mobile隐藏？

Question

我只想制作一个标签和文字字段以及搜索图标，这些图标都是水平的，如图所示，但搜索图标不会显示，也不会水平显示。

这是我的小提琴http://jsfiddle.net/yCUY7/

<div data-role="content">
    <label class="searchLable">suchtest</label>
    <input type="text" class="inputSearch_h">
    <div class="icon-search icon-search_h" data-icon="search"></div>
</div>

Answer 1

jQuery Mobile真的希望你按照自己的方式去做。您需要编写一些自定义的html / css来获得您想要的内容，因为输入（默认情况下）包含在跨越页面宽度的div中。

您需要尝试使用自己应用的宽度，但这应该可以让您入门。

HTML：

<div data-role="content">

     <div class="wrap">
         <label class="searchLable">suchtest</label>
         <input type="text" class="inputSearch_h" />
         <span class="ui-icon ui-icon-search ui-icon-shadow"></span>
     </div>

    <label for="search-basic">The jQuery Mobile Way:</label>
    <input type="search" name="search" id="searc-basic" value="" />
</div>

CSS：

.wrap {
    margin-bottom: 1em;
    overflow: hidden;
}
.wrap label, .wrap .ui-input-text, .wrap .ui-input-text+span {
    display: block;
    float: left;
}
.wrap label {
    line-height: 3em;
    text-transform: uppercase;
    width: 20%;
}
.wrap .ui-input-text {
    width: 70%;
}
.wrap .ui-input-text+span {
    margin-top: 1.4em;
    margin-left: 5px;
}

编辑第一次错过了内联标签 这是一个更新的Fiddle