Question

I have a design that has form labels inline to the left of text fields. The labels are all different widths. I need to have the right edge of the text field right aligned.

Currently the fields look like this. See how the right edge is not aligned?

Name: _____________

Address: _____________

City: _____________

I need it to look something like this…

Name: _______________

Address: _____________

City: _________________

Can I do this without having to set a fixed width on each text field?

Answer 1

Granted it’s probably not the most efficient approach, but you could make a separate table for each field.

HTML

<table>
    <tr>
        <th>Name:</th>
        <td><input type="text"></td>
    </tr>
</table>

<table>
    <tr>
        <th>Address:</th>
        <td><input type="text"></td>
    </tr>
</table>

<table>
    <tr>
        <th>City:</th>
        <td><input type="text"></td>
    </tr>
</table>

​
CSS

table { width: 300px; }
td { border-bottom: 1px solid black; }
th { width: 1em; }

input { width: 100%; border: none; }
input:focus { outline: none; }

​ ​
JS Fiddle: http://jsfiddle.net/BUy6f/2/
​