Menu
In a form, I would like the input:text to fill the remain space after the label to the form is left and right justified.
The label have number of characters so I can't set a fixed width on the label.
Code example:
<fieldset>
<legend>User Info</legend>
<p><label>First Name :</label><input type="text"...></p>
<p><label>Last Name : </label><input type="text"...></p>
<p><label>Completed Email Address :</label><input type="text"...></p>
</fieldset>
How can I style the input to fill the remaining space after the text.
Thanks.
657
<!doctype html>
<html>
<head>
<style>
.grid { width: 100%; display: table; table-layout: auto; }
.row { display: table-row; }
label.cell { white-space: nowrap; display: table-cell; }
span.cell { width: 100%; display: table-cell; }
span.cell input { width: 100%; display: block; }
</style>
</head>
<body>
<fieldset>
<legend>User Info</legend>
<div class="grid">
<div class="row"><label class="cell">First Name:</label> <span class="cell"><input type="text" /></span></div>
</div>
<div class="grid">
<div class="row"><label class="cell">Last Name:</label> <span class="cell"><input type="text" /></span></div>
</div>
<div class="grid">
<div class="row"><label class="cell">Completed Email Address:</label> <span class="cell"><input type="text" /></span></div>
</div>
</fieldset>
</body>
</html>
Won't work in older browsers.
LE: if you don't need/want/have to support old browsers such as IE 6 and 7, use this code. Otherwise, use JavaScript. Ooor use this code an throw in some JavaScript for IE 6 and 7. Yeah, I think that's the best way to do it :D
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
