Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Input Box Alignment?

How can I get my boxes to align with one another if the text in the is longer than the others.

I have this entire form within an unordered list.

I have copied and displayed the code via jsFiddle, you can find what I am speaking of here...

http://jsfiddle.net/EFByC/

like image 794
Aaron Brewer Avatar asked Sep 27 '11 22:09

Aaron Brewer


People also ask

How do you align input boxes in HTML?

HTML | <input> align Attribute left: It sets the alignment of image to the left. it is a default value. right: It sets the alignment of image to the right. middle: It sets the alignment of image to the middle.

How do you align input fields?

We specify the margin-bottom of our <div> element. Then, we set the display of the <label> element to "inline-block" and give a fixed width. After that, set the text-align property to "right", and the labels will be aligned with the inputs on the right side.

What is box alignment?

When using the box alignment properties you will align content on one of two axes — the inline (or main) axis, and the block (or cross) axis. The inline axis is the axis along which words in a sentence flow in the writing mode being used — for English, for example, the inline axis is horizontal.


1 Answers

Your <label> tags were wrapping the <input> tags which was causing the issue of trying to treat them separately with CSS:

http://jsfiddle.net/EFByC/3/

like image 186
Allen Liu Avatar answered Sep 18 '22 16:09

Allen Liu