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

Question

Question

CSS aligning radio buttons

asked on June 10

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 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%;}

 

1 0

Replies

You are not allowed to reply in this post.
replied on June 10

Have you tried using the Layout drop-down menu? This allows you to change the arrangement of radio buttons without needing CSS.

 

You are not allowed to follow up in this post.

Sign in to reply to this post.