You are viewing limited content. For full access, please sign in.

Question

CSS aligning radio buttons

Forms

Updated June 10, 2021

asked on June 10, 2021

I'm building a form and I'm hoping to have everything in one line.

You'll see the top one I've used the CSS (below) to get the question in one line, but ideally I want the radio buttons to also be in line like the second option when I don't use CSS. Is there any way to accomplish this? I'm a beginner to CSS, but want my form to be easily read.

#q6 label {width: 350px;}
#q6 .cf-small {width: 200px;}
#q6 .cf-field {width: 200px;}

0 0

Answer

SELECTED ANSWER

replied on June 10, 2021 • Show version history

Have you tried out the Layout drop-down options in Forms? This may allow you to edit the layout without needing CSS:

If you want your radio buttons to look like the below screenshot, you can use the following code alongside the above settings:

#q6 label{width:45%; display:inline-block;}
#Field6 label{width:auto;}
#q6 .cf-field{width:45%; display:inline-block;}
#q6 .choice{margin-left:5%;}

Question

Question

CSS aligning radio buttons

Answer

Replies

Sign in to reply to this post.