jquery - 按钮与输入和标签在同一行

Question

我想在标签和输入框的同一行中放置一个按钮。

我希望该按钮适应内容，所以我不需要大按钮。甚至，如果它能有图像，就更好了。

现在这是我的代码:

             <div data-role="fieldcontain">
                 <button onclick= "codeAddress();" style="float:left;">Buscar</button>
                 <div data-role="fieldcontain">
                    <label for="placeActivity">Lugar</label>
                    <input type="text" name="placeActivity" id="placeActivity" value="">
                 </div>
              </div>

和 fiddle 的例子:

http://jsfiddle.net/3jgeop7t/

Answer 1

使用JQuery Mobile Three-column grids

DEMO:

<div class="ui-grid-b"  data-role="fieldcontain">
    <div class="ui-block-a"><button onclick= "codeAddress();" data-inline="true">Buscar</button></div>
    <div class="ui-block-b"><label for="placeActivity">Lugar</label></div>
    <div class="ui-block-c"><input type="text" name="placeActivity" id="placeActivity" value=""></div>
</div><!-- /grid-b -->

如果您只想要一个普通按钮，请使用 data-inline="true"

使用 css 更新以固定标签大小:

.ui-grid-b[data-role=fieldcontain] label{
    font-size: 18px;
    line-height: 60px;
    font-weight: bolder;
}

DEMO