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
Post a Comment