Yii CHtml::radioButtonList - CSS to align horizontally

Question

I am using yii framework for my development . I wrote CSS and able to align my <input tags in html properly and I am using the same CSS for yii and the alignment is messed up . Could some help me on this ?

I wanted it to be displayed like below

Here is the yii code I have

<div id="gender">
        <label>Gender :</label>
        <?php echo CHtml::radioButtonList('gender_code','',array('Male'=>'Male','Female'=>'Female'),array('separator'=>'')); ?>
    </div>

CSS

 <style type="text/css">          
           div#gender {
                    margin-top:20px;
                    margin-left:200px;
           }      

           div#gender label
           {
                   font-weight: bold;
                   font-size: 0.9em;
                   float:left;
                   margin-left:2px;
                   text-align:left;
                   width:100px;
            }

</style>

and it is coming as below image

Solution 1

Looks like you might need

div#gender input
{
    float:left;
}

Solution 2

<?php echo CHtml::radioButtonList('gender_code','',array('Male'=>'Male','Female'=>'Female'),array(
    'labelOptions'=>array('style'=>'display:inline'), // add this code
    'separator'=>'',
)); ?>

Solution 3

add this css code somewhere (to the end of css/main.css, for example):

input[type=radio] + label, input[type=checkbox] + label { display:inline !important; }

Comments

[Bujji]

Thanks for your quick response . I am not good at CSS and playing with label for last one hour to align them . Not even thought about input . Once again thanks for your help

[Joseph Marikle]

@Bujji Thanks. I didn't think you down voted my answer. I figure someone has a valid reason for voting this solution down and I just wish they gave some input so I could learn what not to do, but oh well.