https://www.machform.com/forums/ MachForm Community Forums Topic: label, radio button on same line, and radio buttons lined up en Mon, 11 May 2026 15:46:14 +0000 https://www.machform.com/forums/topic/label-radio-button-on-same-line-and-radio-buttons-lined-up#post-12859 Thu, 03 Nov 2011 04:13:49 +0000 cheryledwards 12859@https://www.machform.com/forums/ <p>Thank you Christopher. That helped with aligning the radio buttons, but I also wanted the radio buttons aligned with the label. The following is the additional solution kindly provided by Appnitro, which works excellently!</p> <p>To make the form field label on the same line with the options. Search for this code :</p> <p>label.description {<br /> border: medium none;<br /> color: #222222;<br /> display: block;<br /> font-size: 95%;<br /> font-weight: 700;<br /> line-height: 150%;<br /> padding: 0 0 1px;<br /> }</p> <p>and change it to </p> <p>label.description {<br /> border: medium none;<br /> color: #222222;<br /> display: block;<br /> font-size: 95%;<br /> font-weight: 700;<br /> line-height: 150%;<br /> padding: 0 0 1px;<br /> float: left;<br /> width:80%;<br /> } </p> https://www.machform.com/forums/topic/label-radio-button-on-same-line-and-radio-buttons-lined-up#post-12854 Tue, 01 Nov 2011 22:56:47 +0000 christopherbrooks 12854@https://www.machform.com/forums/ <p>I followed this with no problem, taken from the other post:</p> <p>For radio buttons/checkboxes, we need a different method.<br /> Take a look at this sample <a href="http://www.appnitro.com/forms/view.php?id=7" rel="nofollow">http://www.appnitro.com/forms/view.php?id=7</a></p> <p>You can see the custom CSS at the bottom of this file:<br /> <a href="http://www.appnitro.com/forms/data/form_7/css/view.css" rel="nofollow">http://www.appnitro.com/forms/data/form_7/css/view.css</a></p> <p>So basically what we need to do is to set the display property of those labels, checkboxes and radio button to inline.</p> <p>On the sample form above, if you look at the HTML code, Multiple Choice is surrounded by a li with id li_1, the CSS for this element:</p> <p>#li_1 label.choice {<br /> display:inline;<br /> position:relative;<br /> margin-left: 0.2em;<br /> _top:0.2em;<br /> }</p> <p>#li_1 input.radio {<br /> display: inline;<br /> margin-left: 0.5em;<br /> }<br /> While the Checkboxes fields are surrounded by a li with id li_2, the CSS is:</p> <p>#li_2 label.choice {<br /> display:inline;<br /> position:relative;<br /> margin-left: 0.2em;<br /> _top:0.2em;<br /> }</p> <p>#li_2 input.checkbox{<br /> display: inline;<br /> margin-left: 0.5em;<br /> }<br /> So you can use the above CSS for your form, one for the checkboxes and the other for multiple choice. Adjust li_1 and li_2 to match your elements id. </p> https://www.machform.com/forums/topic/label-radio-button-on-same-line-and-radio-buttons-lined-up#post-12850 Tue, 01 Nov 2011 01:38:25 +0000 cheryledwards 12850@https://www.machform.com/forums/ <p>I know there has been a lot about this topic but because some responses are so long it gets very confusing, particularly when it doesn't work out. May I please have a "fresh" response to my question:</p> <p>I would like all radio buttons on my form to be on the same line as the label, and I would like all the radio buttons lined up for all the questions on the form. </p>