如何保持并排搜索框和提交按钮？

Question

在 IBM Worklight 中测试

by data-inline="true" 它不起作用？位置在上下，但我想并排。

    <div data-role="header" id="the-page" data-position="fixed">
            <h3>YUMMY</h3>

            <div data-role="navbar" id="navbar" data-iconpos="left">
            <ul>
                <li><a href="#Favs" id="favs" data-icon="star">Favs</a></li>
                <li><a href="#myPanel" id="more" data-icon="bars">More</a></li><!-- PANEL LINK -->
            </ul>
        </div>

            <label for="search" id="label" style="font-weight: bold; font-style: italic; font-family: Comic Sans MS"></label>
            <input type="search" name="search" id="search" data-mini="true" placeholder="Search for Restaurants" data-theme="a" data-inline="true">
<input type="submit" value="Go" data-inline="true" id ="submit" onclick="getRestaurants()">
.....

截图link

https://dl.dropboxusercontent.com/u/15844249/Whosebug/side%20by%20side%20search%20submit.png

Answer 1

向您的提交按钮添加一个 ID 并删除内联数据。

<input type="submit" value="Go" id="submit" onclick="getRestaurants()">

然后在您的输入周围添加容器。

 <div id ="container">
   <div id ="search_con">
    <input type="search" name="search" id="search" data-mini="true" placeholder="Search for Restaurants" data-theme="a">
   </div>
   <div id="submit_con">
    <input type="submit" value="Go" id ="submit" onclick="getRestaurants()">
   </div>
 </div>

并根据每个容器内组件的宽度调整屏幕上容器的宽度。另外 float 每个容器都离开，以便它们并排。

<script>
    #container {width:100%;}
    #submit_con {width:20%; float:left;}
    #search_con {width:80%; float:left;}
    #search {width:100%;}
    #submit {width:100%;}
</script>

将其放在文档的 <head> 标签内。

http://jsfiddle.net/6opot4cs/3/

如何保持并排搜索框和提交按钮？

How to keep side by side search box and submit button?

html

jquery-mobile