与输入和标签位于同一行的按钮

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>

小提琴示例：

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

Answer 2

尝试使用：

display: inline-block;
vertical-align: middle;

如果它们不合适，请调整每个元素的宽度。

Answer 3

您可以尝试以下内容

<强> FIDDLE

<div data-role="fieldcontain" class='main'>
    <button onclick="codeAddress();">Buscar</button>
    <div data-role="fieldcontain" class='container'>
        <label for="placeActivity">Lugar</label>
        <input type="text" name="placeActivity" id="placeActivity" value="" />
    </div>
</div>

<强> CSS

.main {
    width:100%;
}
button {
    float:left;
    width:200px !important;
}
.container {
    float:right;
    width:50% !important;
    top:-60px;
}

Answer 4

您使用jQuery Mobile和特殊的CSS。您需要在内联样式或自定义css文件中更改相同的属性。

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