如何使用jquerymobile連續顯示多個<input>

我想用jquerymobile連續顯示兩個日期。但它只適用於桌面瀏覽器。在手機瀏覽器將在獨立的行。如何使用jquerymobile連續顯示多個<input>

<div data-role="fieldcontain"> 
       <label for="time_start" class="ui-hidden-accessible">time_start:</label> 
       <label for="time_end" class="ui-hidden-accessible">time_end:</label> 
       <input type="date" name="time_start" value="2011-05-30" /> — <input type="date" name="time_end" value="2011-05-30"/> 
</div>

來源

2012-03-28 Jacky

您是否嘗試過將標籤和輸入內部跨度？

來源

2012-03-28 05:44:41 ghostCoder

-1

也許你可以使用網格

<div class="ui-grid-a">    
    <div class="ui-block-a"><label for="time_end" class="ui-hidden-accessible"> 
     time_end: </label> 
    <div class="ui-block-b"><label for="time_end" class="ui-hidden-accessible"> 
     time_end: </label>     
</div>

來源

2012-03-28 16:01:30 dali

浮動achive它：左，寬度：80（例如）應該爲你做的伎倆。這是一個小按鈕和大按鈕的例子。

http://jsfiddle.net/den232/SN85d/

祝你好運！

.floatleft { 
    float:left; 
} 
.floatright { 
    float:right; 
} 
.forceinline{ /* Prevent fieldcontain from doing a BLOCK thing */ 
    display:inline !important; 
} 
.textwidth { /* limit width of input fields */ 
    width:80px; 
} 
.closespacing { /* controls spacing between elements */ 
    margin:0px 5px 0px 0px; 
} 
.bigselect { /* centers select with big buttons */ 
    padding: 0px; 
    margin:2px 5px 0px 0px; 
} 
.biginputheight { /* matches text input height to big buttons */ 
    padding-top:10px !important; 
    padding-bottom:12px !important; 
} 
.miniinputheight { /* matches text input height to minibuttons */ 
    padding-top:5px !important; 
    padding-bottom:5px !important; 
} 
<div data-role="page" class="type-home">

<ul data-role="listview"> 
    <li data-role="fieldcontain">first LI line</li> 
    <li data-role="fieldcontain"> 

    <div class='floatleft closespacing'> 
     Big Buttons<br>More Text 
    </div> 

    <div class='floatleft textwidth'> 
     <input type="date" placeholder="#1" class='biginputheight'></input> 
    </div> 

    <div class='floatleft textwidth'> 
     <input type="date" placeholder="#2" class='biginputheight'></input> 
    </div> 


    </li> 
    <li data-role="fieldcontain"> 

    <div class='floatleft closespacing'>  
     Small Buttons 
    </div> 

    <div class='floatleft textwidth'> 
     <input type="date" placeholder="s1" class='miniinputheight'></input> 
    </div> 

    <div class='floatleft textwidth'> 
     <input type="date" placeholder="s2" class='miniinputheight'></input> 
    </div> 

    </li> 
    <li data-role="fieldcontain">last LI line</li> 

</ul><!-- /listview -->

來源

2012-10-23 19:34:31 den232

如何使用jquerymobile連續顯示多個<input>

回答

相關問題