pramod Posted May 7, 2013 Report Share Posted May 7, 2013 Hi All, I need few labels and corresponding text boxes with a button to be shown on a page. Would like to know how this can be done so as to perfectly align the labels both horizontally and vertically and controls just like I used to align using tables. Ex: Label1: <TextBox>__________Label2: <TextBox> Label3: <TextBox>__________Label4: <TextBox> Label5: <TextBox>__________Label5: <TextBox> Please help. Quote Link to comment Share on other sites More sharing options...
Andrea Posted May 7, 2013 Report Share Posted May 7, 2013 How does your HTML for this look like? Quote Link to comment Share on other sites More sharing options...
Moloney Posted May 8, 2013 Report Share Posted May 8, 2013 I would agree with Andrea --> the context (ie surrounding HTML & css) is important. I'm not even sure what the question is but maybe something like this will work or you: <style> .float { float: left; padding:5px; } .clear { clear:both; /* or just clear left */ } fieldset { width:450px; text-align:center; padding:5px; } input[type="submit"] { margin: 2% auto; padding:5px; } </style> <div> <form> <fieldset> <div> <span class="float"> <label for="label1">Label 1:</label> <input type="text" name="label1" value="label1"> </span> <span class="float"> <label for="label2">Label 2:</label> <input type="text" name="label2" value="label2"> </span> </div> <div class="clear"> <span class="float"> <label for="label3">Label 3:</label> <input type="text" name="label3" value="label3"> </span> <span class="float"> <label for="label4">Label 4:</label> <input type="text" name="label4" value="label4"> </span> </div> <div class="clear"> <span class="float"> <label for="label5">Label 5:</label> <input type="text" name="label5" value="label5"> </span> <span class="float"> <label for="label6">Label 6:</label> <input type="text" name="label6" value="label6"> </span> </div> <div class="clear"> <input type="submit" value="Submit Button"> </div> </fieldset> </form> </div> </div> Quote Link to comment Share on other sites More sharing options...
pramod Posted May 31, 2013 Author Report Share Posted May 31, 2013 Thank you guys.. Sry.. was bit busy with other jobs. Will check if the given css code suits fine for me and let you know. Thanks again. Quote Link to comment Share on other sites More sharing options...
pramod Posted May 31, 2013 Author Report Share Posted May 31, 2013 Hi Stephenius, Your example answers my query. But if I need some descent space between textbox-label1 and Label2, how can I achieve it ? that is, vertical space between <span class="float"> <label for="label1">Label 1:</label> <input type="text" name="label1" value="label1"> </span> and <span class="float"> <label for="label2">Label 2:</label> <input type="text" name="label2" value="label2"> </span> Please assist. Quote Link to comment Share on other sites More sharing options...
Andrea Posted May 31, 2013 Report Share Posted May 31, 2013 You can either add padding or margins to your .float, or you can give one a different or additional class and apply the spacing only to it. Quote Link to comment Share on other sites More sharing options...
pramod Posted May 31, 2013 Author Report Share Posted May 31, 2013 ok.. Will test and come back here with the results. Thanks Andrea Quote Link to comment Share on other sites More sharing options...
zeeshanaayan07 Posted September 1, 2013 Report Share Posted September 1, 2013 This coding is very important for HTML and CSS Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.