Question

我尝试使用提交按钮创建一个搜索字段，其中提交按钮的宽度基于它的内容，我尝试使输入字段宽度变得流畅，并尽可能地增加。它在jQuery mobile中。

我找到this solution，并尝试实施但未成功。这是一个测试JSFIDDLE

我在一个简单的html页面上尝试过它，并且就可以了。

有人能指出我在哪里弄错了吗？

HTML

<div data-role="main"  class="ui-content">
    <form method="post">
        <div class="searchContainer">

            <input type="submit" name="search" value="Go" style="float: right" />
            <div style="overflow: hidden; padding-right: .5em;">
                <input type="text" name="term" style="width: 100%;" />
            </div>
            <input type="hidden" name="op" value="search" />
        </div>
    </form>

    Here comes the content
</div>

Answer 1

在您的代码中添加此CSS

.searchContainer > div:first-child {float:right;display:inline-block;}

按钮将根据内容进行排列。

这是通用的解决方案。您可以使用类名来编写它。

Answer 2

也许使用table会完成这项工作

<强> HTML

<div data-role="page">
    <div data-role="panel" id="myPanel">
            <h2>Panel Header..</h2>

        <p>Some text..</p>
    </div>
    <div data-role="header" data-theme="b">
         <h1>header</h1>

    </div>
    <!-- /header -->
<div data-role="main"  class="ui-content">
            <form method="post">
                <div class="searchContainer">
                <table style="width: 100%;">    
                    <tr>
                        <td><input type="text" name="term" style="width: 100%;" /></td>
                        <td><input type="submit" name="search" value="Go" /></td>
                    </tr>
                    </table>


                    <input type="hidden" name="op" value="search" />
                </div>
            </form>

            Here comes the content
        </div>
    <div data-role="footer" data-theme="b">
            <h1>Copyright © </h1>

    </div>
</div>

<强> DEMO HERE

Answer 3

如果您想要没有宽度的并排元素，请删除float并将display:inline-block;设置为两个元素。或者，如果按钮具有固定宽度（例如70px），则使用带calc()的float作为输入字段宽度。 width: calc(100% - 70px)

输入文本的流体宽度通过提交

3 个答案: