wesley Posted September 18, 2015 Share Posted September 18, 2015 Hello, I have make a form. But the form is not align. I want to have spece between the label and the input, like in the image. The dual column example you see space between the label and the input. My question is: how can I make this? My css is: label{ display:block; color: white; margin:12px; padding: 12px; }input{ height:40px; width: 190px; font-size:20px;} thanks in advance. Link to comment Share on other sites More sharing options...
niche Posted September 18, 2015 Share Posted September 18, 2015 (edited) We need to see more code. Else, look into the css box model, divs, and float Edited September 18, 2015 by niche Link to comment Share on other sites More sharing options...
Ingolme Posted September 18, 2015 Share Posted September 18, 2015 Display the label as a block. Set the width of the label to 50%. Since the input has a border it needs to be slightly less than 50% in width. Float the label to the left and clear the left side of the label. In order to align the label and input vertically you can set the line-height of the label and its parent element to a fixed value that's the same for both, then set the vertical-align of the input element to "middle" Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now