Question

I would like to do a nice layout table like that: http://jquerymobile.com/demos/1.2.0/docs/lists/lists-forms-inset.html

Text label on the left and then input/information aligned on the right.

When I insert inputs, selects, etc. it is aligned correctly on the right. However I am not sure how to insert simple text so it is aligned correctly on the right. Is there a <> tag I need to surround my text with so it is correctly aligned?

Thank you for your help.

<ul data-role="listview" data-inset="true">
    <li data-role="fieldcontain">
        <label for="name">Text Input:</label>
        <input type="text" name="name" id="name" value=""  />
    </li>
    <li data-role="fieldcontain">
        <label for="textarea">Textarea:</label>
        THE TEXT I WOULD LIKE TO SEE RIGHT-ALIGNED.
    </li>
</ul>

Here is an example: https://tinker.io/71d3c/1

Answer 1

You should add a class ui-input-text like this:

<label for="textarea" class="ui-input-text">Textarea:</label>
THE TEXT I WOULD LIKE TO SEE RIGHT-ALIGNED.

Here’s an example: http://jsfiddle.net/YA8f6/

EDIT:

And here’s an example with right alignment: http://jsfiddle.net/DqD7X/