Question

在IBM Worklight中进行测试

通过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()">
.....

截图链接

https://dl.dropboxusercontent.com/u/15844249/stackoverflow/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/

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

1 个答案: