Question

我正在尝试制作搜索栏。如何使“go”按钮和搜索输入成为内联？我把我的代码放在下面，但我不确定错误在哪里。

<div style="float:right;display:inline;">
	 
  <div>
	 
    <button class="ui-btn  ui-corner-all ui-btn-inline ui-mini" style="margin:0 0 0 
             0;padding: 0 0 0 0;">GO!
    </button>
 	 
    <input name="searchword" id="search" value="" placeholder="Placeholder text..." 
           type="search" />
   
  </div>  


</div>

Answer 1

代码工作正常。

如果你想要它是准确的，删除子包装div，使按钮20px并使用display：inline-flex;而不是内联。也许它会成为想要的东西

Answer 2

jQM将输入包装在div中。您可以使用 data-wrapper-class 属性为包装器分配css类：

<div style="float:right;display:inline;">
    <div>
        <button class="ui-btn ui-corner-all ui-btn-inline ui-mini btnclass">GO!</button>
        <input name="searchword" id="search" value="" placeholder="Placeholder text..." type="search" data-wrapper-class="inputWrap" />
    </div>
</div>

.inputWrap {
    display: inline;
    float: left;
    margin-right: 4px;
}
.btnclass {
    margin-top: 8px;
    height: 37px;
}

<强> DEMO

如何在div中内置一个按钮并搜索输入内联

2 个答案: