freeformat question with graphical buttons is not laying out correctly

Question

I'm using the following html in a free format question:

<ul>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,1)%]Advertising or Promotions Manager</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,2)%]Art Manager/Art Director</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,3)%]Creative Manager/Creative Director</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,4)%]Desktop Publisher</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,5)%]Graphic Designer/Illustrator</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,6)%]Photographer (Professional Photographer)</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,7)%]Print Production Worker/Manager/Director</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,8)%]Print Service Provider</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,9)%]Print or Publishing Editor</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,10)%]Publisher (Books, Magazines, Catalogs)</li>
<li class="clickable" onClick="clearother();">[%RadioSelect(Q4_a,15)%]Other Design not listed above (incl. artist, fashion/interior/commercial design, etc., please specify)<br><input type="text" size="30" name="Q4_other1" onKeyUp="SSI_SetSelect('Q4_a_15', true);document.mainform.Q4_other2.value='';document.mainform.Q4_other3.value='';document.mainform.Q4_other4.value='';document.mainform.Q4_other5.value=''"></li>
</ul>

When the page is displayed, the radiobuttons are on 1 line and the answer option is on the next.

Anyone have any idea why? and how I can fix it?

Thanks,

Answer 1

The radio buttons are set to block display by default, forcing the labels to appear on a separate line.  Try adding this CSS to the free format:

<style>
.clickable .radiobox {
    display: inline-block;
}
</style>

Comments

Worked like a charm - thanks Zachary!

---

ooops - jumped the gun.

It displays great - but when you click on an option, it jumps to 2 lines again.

---

Whoops.  We need ".graphical_select" instead:

<style>
.clickable .graphical_select {
    display: inline-block;
}
</style>

---

PERFECT!!

Thank you so much.