iphone - One line label/input field using jquery mobile CSS -


i'm trying display list of labels , inputs using jquery mobile results settings on iphone, e.g label left aligned, , input right aligned on same row. way i've managed using tables, believe bad practice?

what equaling css without tables?

   <ul data-role="listview" data-dividertheme="e">                 <li data-role="list-divider">seamless list (margin-less)</li>                 <li>                     <table style="width:100% ">                         <tr>                             <td style="width: 50%">                                 foo1                             </td>                             <td style="width: 50%">                                  <input type="number" value="20000" style="text-align: right"                                  id="foo1input" />                              </td>                         </tr>                     </table>                 </li> 

you try this: http://jsfiddle.net/7layw/1/.

html

<div id="listwrapper">     <div class="leftitem">         foo1     </div>     <div class="rightitem">         <input type="number" value="20000" style="text-align: right"          id="foo1input" />     </div>     <div class="leftitem">         foo2     </div>     <div class="rightitem">         <input type="number" value="20000" style="text-align: right"          id="foo1input" />     </div> </div> 

css

.leftitem {     clear: both;     float: left;     width: 50%; }  .rightitem {     float: left;     width: 50% } 

with method have wrap each item on left in div class leftitem , every item on right class of rightitem.

i hope helps!


Comments

Popular posts from this blog

Javascript line number mapping -

c# - Is it possible to remove an existing registration from Autofac container builder? -

php - Mysql PK and FK char(36) vs int(10) -