Render Cjuibutton Buttonset Horizontal Radio Buttons

So I want to display a time span represented as four segments where the user chooses one of the segments in the time span. Each time segment will be represented by a button whose width will be proportional to the total time span (time seg/time span) as a visual clue. The buttons should be exclusive so only one button can show as selected/active due to the fact that the contents of another div will depend on which time seg is currently selected.

My first thought was:

?php 
$this->beginWidget('zii.widgets.jui.CJuiButton', array(
	'buttonType'=>'buttonset',
	'name'=>'spanType-set',
));
?>
	<?php 
	$this->widget('zii.widgets.jui.CJuiButton',array(
		'name'=>'spanSeg_0',
		'caption'=>'Seg 1',
		'buttonType' => 'radio',
		'htmlOptions' => array('style' => 'width: 35%;'),
	
	));
	....more segments here like the one above
	?>
<?php
$this->endWidget();
?>

Two immediate problems:

• Each button is rendered as a row giving 'n' rows of buttons as opposed to the desired result of one row. I will add that that buttons still have rounded corners on only the first and last button element.
  
• The exclusivity of the buttons does not appear to be retained.

To the first issue since the styling of the buttons appears to render properly and this all of this code is rendered not only inside a

<div class="form">

but also inside a

$this->beginWidget('CActiveForm')

I believe the default css is giving me the unwanted line breaks between each button element. Not sure how best to go about getting stronger control over css rendering.

To the second issue I am even less knowledgeable.

The desired result will be a set of N (3 to as many as 6) exclusive buttons using the CJuiButton with button type of buttonset.