通過提交輸入文本一側的流體寬度

我嘗試創建一個帶有提交按鈕的搜索字段，其中提交按鈕的寬度基於它的內容，並且我嘗試使輸入字段寬度變得流暢，並且作爲儘可能最大。它在jQuery手機中。通過提交輸入文本一側的流體寬度

我發現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>

來源

2015-01-14 vaso123

你想要什麼？提交按鈕的寬度只有'go'這個字？ –

是的，並浮動到輸入，如果我調整屏幕的大小，輸入應strech。 – vaso123

將你的css表添加到小提琴 –

在你的代碼

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

按鈕將得到安排按內容添加此CSS。

這是通用的解決方案。你可以用類名寫它。

來源

2015-01-14 12:38:01

似乎沒關係，我嘗試實現它。 – vaso123

謝謝，它工作得很好。但是，可以解釋我，爲什麼它不起作用，如果我直接在按鈕上以內聯樣式添加這些規則？ – vaso123

由於您使用的是jQuery Mobile，因此它將添加一個父容器到搜索區域，因爲內聯樣式不起作用。 –

也許使用表將做的工作

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

來源

2015-01-14 12:26:21

哦，不，2014年沒有辦法使用這個表...表格是表格數據。 – vaso123

如果您想要沒有寬度的並排元素，請移除浮動並將display:inline-block;設置爲這兩個元素。或者如果按鈕具有固定的寬度（例如70px），則使用float與calc()來輸入字段寬度。 width: calc(100% - 70px)

來源

2015-01-14 12:33:15

我試過了。如果我只是使用內聯塊，那麼文本輸入將不會被拉伸。 – vaso123

通過提交輸入文本一側的流體寬度

回答

相關問題