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

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”标签。你可以找到很多横向列表设计here。

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 的样式。这应该可以解决这个问题。

没有任何样式的这提供了verical单选按钮。但是，如果您在 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 &nbsp;&nbsp;
  <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>