如何水平而不是垂直排列单选按钮？

Question

我一直在查看 Cookbook - 7.3.3 Automagic Form Elements试图找到一种让单选按钮水平排列而不是垂直排列的方法。我一直在看 'div' =>; 'class_name' $options 也是 $options[' Between'] 、 $options['separator'] 和 $options['after' ] 但没有成功。有没有一种“蛋糕”的方式来做到这一点？

<?=$form->input('Product Type', array(
     'type' => 'radio',
     'id' => $tire['ProductType']['id'],
     'name' => $tire['ProductType']['id'],
     'options' => array(2=>'Tire Manufacturer', 7=>'Rim Manufacturer '),
));?>

等价于此

<label>Product Type</label>
<div style="padding-top:5px;">
    <input type="radio" name="data[Manufacturer][product_type_id]" value="<?=$tire['ProductType']['id']?>"> Tire Manufacturer &nbsp;&nbsp;
    <input type="radio" name="data[Manufacturer][product_type_id]" value="<?=$wheel['ProductType']['id']?>"> Rim Manufacturer
</div>

Answer 1

这对我有用：
在视图文件 (viewfile.ctp) 内：

<div>  
<?php  
echo $this->Form->create('changeRegion');  
$options=array('US'=>'U.S.','CA'=>'Canada', 'FN'=>'International');  
$attributes=array('legend'=>false, 'label'=>false, 'value'=>'US', 'class'=>'locRad');  
echo $form->radio('subLocation',$options,$attributes);  
echo $this->Form->end();  
?>  
<div class="clear"></div>  
</div>  

确保在属性中设置了 'label'=>false 和 'legend'=>false。

在你的样式表中：

input[type=radio] {
float:left;
margin:0px;
width:20px;
}

form#changeRegionStdForm input[type=radio].locRad {
margin:3px 0px 0px 3px; 
float:none;
}

由于 input[type=radio] 的默认 CakePHP 样式规则（在 app/webroot/css/cake.generic.css 内），我永远与之斗争文件）始终优先。我生成了另一条规则，通过引用表单以及附加有类名的无线电输入规则来专门挑选出有问题的无线电组(form#changeRegionStdForm input[type=radio].locRad)。我最初使用 input[type= 之前列出的 form# 规则来执行此操作。只有当我将其移动到input[type=之后，单选按钮才会水平排列。

我希望这是有道理的，并且能够真正帮助别人。

Answer 2

最简单的方法是将每个单选按钮放在“LI”标签内，然后将 CSS 样式应用于“UL”，告诉它水平显示“LI”标签，而不是垂直显示。您可以在此处找到很多水平列表设计。

Answer 3

我很晚才发现这个帖子。但我认为其他人可能会像我现在一样偶然发现这一点。

尝试这样的操作：

<ul id="hMenu"><li>
<?php
$attributes=array('legend'=>false, 'separator'=>'</li><li>', 'label'=>false);
$form->input('Product Type',$options, $attributes);
?>
</li></ul>

现在设置 id hMenu 的样式。那应该可以解决这个问题。

这没有任何样式提供了垂直的单选按钮。但如果你在 ul 和 li 上使用 css 样式，你实际上可以让它倒立！ :)

Answer 4

使用这个：

$form->input('Product Type', array(
 'type' => 'radio',
 'id' => $tire['ProductType']['id'],
 'name' => $tire['ProductType']['id'],
 'options' => array(2=>'Tire Manufacturer', 7=>'Rim Manufacturer '),
 ***********************
 'seperator' => '<br />'
 ***********************
));

结果如下：

<label>Product Type</label>
<div style="padding-top:5px;">
  <input type="radio" name="data[Manufacturer][product_type_id]" value="<?=$tire['ProductType']['id']?>"> Tire Manufacturer   
  <br />
  <input type="radio" name="data[Manufacturer][product_type_id]" value="<?=$wheel['ProductType']['id']?>"> Rim Manufacturer
</div>

Answer 5

试试这个，我的代码通过这个工作了..

<ul id = "navlist">
    <fieldset>
      <legend><?php echo __('Insert User'); ?></legend>

        <li><?php //echo $this->Form->input('Site', array('options' => $arraycharges));?></li>

        <li><?php echo $this->Form->input('MobileApp', array('options' => array('admin' => 'Admin', 'user' => 'User')));?></li>

        <li><?php echo $this->Form->input('Location', array('options' => array('admin' => 'Admin', 'user' => 'User')));?></li>

    <li><?php echo $this->Form->end(__('GO')); ?></li>

    </fieldset>
 </ul>

在样式表中添加以下内容..

#navlist li {
    display: inline-block;
    list-style-type: none;
    padding-right: 20px;
}

Answer 6

你像这样关注：

<ul>
<li style="width: 200px;float: left;list-style: none">
    <?php
    $attributes=array(
        'legend'=>false,
        'after'=>'</li>',
        'separator'=>'</li><li style="width: 200px;float: left;list-style: none">',
    );
    echo $this->Form->radio('xyz_name',$myOptions,$attributes);
    ?>
     </li>
</ul>