Clever Geek Handbook

Horizontal alignment of form fields

how to make the zip code of the city consistent on the same line i reduced the width but didn't work 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/

+3


source to share


1 answer


Your tags display: block

. Use display: inline-block

as you have with fields.

It took me about 10 seconds to implement the browser developer tools. Pressing [F12] in most modern browsers (FF requires FireBug to be installed) launches the associated developer tools. Here you can check the offending element and see the CSS that is affecting the element (s).



Here's the updated fiddle . I have applied the class to the parent div inline-fields

. In the CSS, I added:

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


source






More articles:


All Articles