Geek Answers Handbook

How can I place text and form inputs according to a specific width (justified)?

I have a form, and I'm trying to make the line “justified” so that the entire line (4 text fields and labels) matches the exact pixel width (say, 800 pixels). Usually, if I just post it without any special css, it is less than 800 pixels. I want to “stretch” it to 800 pixels. I don't care if the text fields need to be stretched or the spaces between them.

This seems like a reasonable layout in MS word if it helps describe what I'm looking for. Is this possible in html / css in the form layout?

+4
source share
5 answers

You basically need text-align-last: justify , which indicates the justification for the "last text line" in the block element, this defaults to the standard direction, which is left in LTR.

 <!DOCTYPE html> <html lang="en"> <head> <title>SO question 15994654</title> <style> #fields { width: 1000px; border: 1px solid gray; } .justified { text-align-last: justify; } </style> </head> <body> <p id="fields" class="justified"> <label for="input1">label1</label> <input id="input1" /> <label for="input2">label2</label> <input id="input2" /> <label for="input3">label3</label> <input id="input3" /> <label for="input4">label4</label> <input id="input4" /> <p> </body> </html>

This works in IE and Firefox (for older versions of Firefox add -moz-text-align-last: justify if necessary), however this fails in Webkit-based browsers (Chrome / Safari). To cover this browser, you need to replace .justified as follows so that the last line no longer appears as the "last line", so text-align: justify can do its job in the usual way:

 .justified { text-align: justify; } .justified:after { content: ''; display: inline-block; width: 100%; }

Note that text-align-last: justify becomes redundant in this way.

Here's the jsfiddle demo .

+5
source

There is actually a very natural way to do this using pure CSS using text-align: justify; .

You have failed because the excuse does not work for the last line (and when there is only one line, it is considered the last). There's a CSS3 property that sets the text alignment for the last line: text-align-last . Unfortunately, it is not supported in general.

The solution is to create an extra element that will drop to the next line, then the first line will be justified:

 <form> <input type="text" value="" /> <input type="text" value="" /> <input type="text" value="" /> <input type="text" value="" /> </form> 
 form { width: 800px; text-align: justify; /* Can we really make this work? Sure! */ } input { display: inline-block; /* making elements respect text-align */ } form:after { content: ""; /* creating a hidden element that drops to next line */ display: inline-block; /* making it respect text-align and width */ width: 100%; /* forcing it to drop to next line */ }

Demo: http://jsbin.com/ituroj/5/ (click "edit" in the upper right corner to play with the code).

Result: semantic, without HTML footprint, minimal CSS code, full browser support.

+3
source

One approach:

 input[type=text] { width: 25%; box-sizing: border-box; }

Or, if the fields are really inside <table/> , as in this script , you can set the width for text fields to 100% , so the table controls the width:

 input[type=text] { width: 100%; box-sizing: border-box; }
+1
source

You can do this by nesting the input and labels inside the columns that you define as a percentage of the width - this way you can control the width of the form, and the inputs will remain justified.

HTML

 <form> <div class="col4"> <label>Input</label> <div class="inputWrapper"> <div class="textInput"> <input type="text"/> </div> </div> </div> <div class="col4"> <label>Input</label> <div class="inputWrapper"> <div class="textInput"> <input type="text"/> </div> </div> </div> <div class="col4"> <label>Input</label> <div class="inputWrapper"> <div class="textInput"> <input type="text"/> </div> </div> </div> <div class="col4 last"> <label>Input</label> <div class="inputWrapper"> <div class="textInput"> <input type="text"/> </div> </div> </div> </form>

CSS

 form{ width:800px; } .col4{ width:23.5%; margin-right:2%; float:left; } .last{ margin:0; } .inputWrapper{ width:100%; } .textInput{ border:1px solid #ccc; display:block; padding:5px; } .textInput input{ width:100%; border:none; padding:0; }

Here you can see the jsFiddle example http://jsfiddle.net/patricklyver/4mbks/

+1
source

You can combine float with box-sizing . You will have to swim, because in different browsers the forms have different oddities. For example, Safari on OS X always has a hidden 1px add-on on top.

Jsfiddle

HTML

 <form id="myForm"> <input type="text" value="" /> <input type="text" value="" /> <input type="text" value="" /> <input type="text" value="" /> <div class="clear"></div> </form>

CSS

 #myForm { border: 1px solid blue; width: 800px; } #myForm input[type=text] { margin: 0px; display: block; float: left; box-sizing: border-box; width: 25%; border: 0px; background-color: orange; } #myForm .clear { clear: both; }
0
source

More articles:


All Articles