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'=＆gt; false 并在您的属性中设置'legend'=＆gt; false 。

在样式表中：

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

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

由于输入[type = radio] 的默认CakePHP样式规则（在 app / webroot / css / cake.generic.css 文件中），我永远打了这个）总是优先考虑。我生成了另一条规则，通过引用表单以及附加了类名（表单#changeRegionStdForm input [type = radio] .locRad）的无线电输入规则来专门挑选出相关的无线电组。我最初使用输入[type = ]之前列出的表单＃规则执行此操作。只有当我在输入之后移动它[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的样式。这应该可以解决这个问题。

这没有任何样式给出了正确的单选按钮。但是如果你在 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>

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

6 个答案: