Yii CHtml::radioButtonList - 如何使用CSS让单选按钮水平对齐

Question

我正在使用yii框架进行开发。我编写了CSS并能够正确地对齐我的html中的<input标签，但是当我在yii中使用相同的CSS时，对齐就乱了。有人可以帮我解决这个问题吗？

我希望它显示如下图所示：

[image]

以下是我的yii代码：

<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>

以下是相关IT技术的图片：

- Bujji

Answer 1

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

- jamband

Answer 2

看起来你可能需要：

div#gender input
{
    float:left;
}

- Joseph Marikle

---

感谢您的快速回复。我不擅长CSS，已经花了一个小时来调整标签的对齐方式，甚至没有考虑输入框。再次感谢您的帮助。 - Bujji

@Bujji 谢谢。我并不认为你会给我的答案投反对票。我想肯定有人有正当理由反对这个解决方案，但我希望他们能提供一些输入，这样我就可以学习哪些地方需要改进，但没关系。 - Joseph Marikle

Answer 3

将以下CSS代码添加到某个位置（例如在css/main.css的末尾）：

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

- zuups