Question

how to make the city state zip to align in the same line
i reduced the width but its not working
how to fix it

<div class="">
   <label class="" for="">City</label><input style="width: 54px;" type="text">
   <label class="" for="">State</label><input style="width: 54px;" type="text">
   <label class="" for="">Zip</label><input style="width: 54px;" type="text" >
</div>

http://jsfiddle.net/VXXPC/19/

Answer 1

Your labels are display: block. Use display: inline-block like you have with the fields.

This took me all of about 10 seconds to realise with the browser developer tools. Hitting [F12] in most modern browsers (FF requires installation of FireBug) launches the bundled developer tools. Here you can inspect the offending element(s) and see the CSS that effects the element(s).

Here’s an updated fiddle. I’ve applied a class to the parent div inline-fields. In the CSS I’ve added:

.inline-fields label {
    display: inline-block;
}