Twitter Blog Lock Level Form

Question

I am trying to get the full login form. Basically, the input fields for the username, password, and button should all be the same length. now I can easily use this using spaces, the problem is that I have an “added” icon to the username and password, the input fields extend beyond the gaps (if I apply the input block level to the inputs), and the scroll buttons only in In case the outer reach is close (if I try btn-block). How to make all elements stretch only to the width of the content range?

Here is my violin.

http://jsfiddle.net/sujesharukil/EP83X/21/

Answer 1

You can use display: table and display: table-cell to get input to properly fill in the remaining space in spans or to use the width of the liquid. Here is the scenario for the first approach:

http://jsfiddle.net/EP83X/22/

Or use a width: 90.666% on inputs based on a fixed icon width (28 pixels) and span widths ((300-28) / 300 * 100).