提交时输入文本的流体宽度

Question

我正在尝试创建一个带有提交按钮的搜索字段，其中提交按钮的宽度基于其内容，并且我尝试使输入字段的宽度尽可能流畅。它在 jQuery 移动设备中。

我找到了this solution, and tried to implement it without success. Here is a test 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

也许使用 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 2

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

Answer 3

在您的代码中添加此 CSS

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

按钮将根据内容排列。

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

提交时输入文本的流体宽度

Fluid width of input text side by submit

css

jquery-mobile