jQuery Mobile的並排輸入

我想通過側（水平）處置端使用jQuery Mobile的兩個輸入jQuery Mobile的並排輸入

我tryed這種方式，但似乎不工作：

<div class="containerButtons ui-grid-a"> 
       <div data-role="fieldcontain" class="ui-block-a" style=" width: 50% !important;"> 
        <label for="start">Start:</label> <input type="date" data-date-format="dd-mm-yy" 
         name="start" class="dataAControl" id="start" > 
       </div> 

       <div data-role="fieldcontain" class="ui-block-b" style=" width: 50% !important;"> 
        <label for="end">End:</label> <input type="date" 
         name="end" class="dataAControl" id="end" > 
       </div> 
        </div>

我用這個方法並排2個按鈕對齊側和它的作品，但我無法使那些投入

來源

2015-04-15 Mattew Trincanati

當我遇到這些問題時，我開始將元素縮小到它們絕對最小以確保它們包裝。事情是大多數元素都有填充/邊距。因此，標籤和輸入之間的空間也應該被刪除，因爲這會影響佈局。即使刪除一個測試的標籤，然後將它們放回..如果他們不包裹所有這一切，然後應使用浮法或其他方法 – Mayhem

我發現這個問題，「內」的div datarole必須是內容

<div class="containerButtons ui-grid-a"> 
       <div data-role="content" class="ui-block-a" style=" width: 50% !important;"> 
        <label for="start">Start:</label> <input type="date" data-date-format="dd-mm-yy" 
         name="start" class="dataAControl" id="start" > 
       </div> 

       <div data-role="content" class="ui-block-b" style=" width: 50% !important;"> 
        <label for="end">End:</label> <input type="date" 
         name="end" class="dataAControl" id="end" > 
       </div> 
        </div>

來源

2015-04-15 08:15:14

您應該使用float:left -

<div class="containerButtons ui-grid-a"> 
 
       <div data-role="fieldcontain" class="ui-block-a" style=" width: 50% !important;float:left"> 
 
        <label for="start">Start:</label> <input type="date" data-date-format="dd-mm-yy" 
 
         name="start" class="dataAControl" id="start" > 
 
       </div> 
 

 
       <div data-role="fieldcontain" class="ui-block-b" style=" width: 50% !important;float:left"> 
 
        <label for="end">End:</label> <input type="date" 
 
         name="end" class="dataAControl" id="end" > 
 
       </div> 
 
    <div style="clear:both;"></div> 
 
        </div>

我希望它能幫助你。

來源

2015-04-15 07:35:31

仍然在兩條單獨的行，左浮動，但另一個頂部 –

我認爲DIV容器可能有padding，那麼試試這個代碼：

<div class="containerButtons ui-grid-a" 
    style="padding:0"> 
    <div data-role="fieldcontain" 
     class="ui-block-a" 
     style=" width: 50% !important;float:left"> 
     <label for="start">Start:</label> 
     <input type="date" 
      data-date-format="dd-mm-yy" 
      name="start" 
      class="dataAControl" id="start"> 
    </div> 

    <div data-role="fieldcontain" 
     class="ui-block-b" 
     style=" width: 50% !important;float:left"> 
     <label for="end">End:</label> 
     <input type="date" 
      name="end" 
      class="dataAControl" 
      id="end" > 
    </div> 

    <!-- don't forget clearing float --> 
    <div style="clear:both;"></div> 
</div>

來源

2015-04-15 08:10:49 yibuyisheng

使用float:left修改這兩個div，這是我需要覆蓋它。

也發送輸入到一個新的行，對我來說，這可以使它更容易閱讀/編輯。

<div class="containerButtons ui-grid-a"> 
    <div data-role="fieldcontain" class="ui-block-a" style="float:left; width: 50% !important;"> 
     <label for="start">Start:</label> 
     <input type="date" data-date-format="dd-mm-yy" name="start" class="dataAControl" id="start" /> 
    </div> 

    <div data-role="fieldcontain" class="ui-block-b" style="float:left; width: 50% !important;"> 
     <label for="end">End:</label> 
     <input type="date" name="end" class="dataAControl" id="end" /> 
    </div> 
</div>

哦，小提琴.. http://jsfiddle.net/xfn244nb/1/

如果失敗，該測試對我來說不..你可以隨時使用display:inline-block;，因爲這一直是我的首選方法。例如Advantages of using display:inline-block vs float:left in CSS

來源

2015-04-15 08:18:37 Mayhem

正在我不使用jQuery mobile ..可能有一個默認的屬性/風格來做到這一點，而不會導致風格改變vs類。但是，將它留在這裏仍然解釋了一個常見的快速修復 – Mayhem

jQuery Mobile的並排輸入

回答

相關問題