jQuery UI Radio Button set line Breaks

Question

when I am using two button sets, they do not display on same line. Is there a way to display both of these on the same line? Here is my code

html:

<div id="view">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Regular</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Investments</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">All</label>
</div>


<div id="lod">
<input type="radio" id="lod_S" name="radio" checked="checked" /><label for="radio2">Summary</label>
<input type="radio" id="lod_D" name="radio" /><label for="radio3">Detail</label>
</div>

javascript:

$('#view,#lod').buttonset();

Thanks in advance for the help.

Answer 1

The default styling for div elements causes one to be below the other. You can substitute span here.

jsFiddle

---

Or use CSS to change the styling of your divs:

<style type="text/css">
    #view, #lod {
        display: inline;
    }

</style>