Как выстроить радиокнопки горизонтально, а не вертикально?

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

Самый простой способ сделать это, чтобы положить каждый переключатель внутри тега «LI», а затем применить стили CSS к «UL», который сообщает ему, для отображения тегов «LI» горизонтально, а не вертикально. Вы можете найти много вариантов горизонтального списка here.

Answer 2

Это работает для меня: Внутри файла вида (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> 

Убедитесь, что 'ярлык' => ложный и 'легенда' => ложный установлены в вашем атрибутов.

В таблице стилей:

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

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

я боролся это навсегда из CakePHP правила стиля по умолчанию для ввода [тип = радио] (внутри приложение/Webroot/CSS/cake.generic.css) всегда имел приоритет. Я сгенерировал другое правило, чтобы специально выбрать группу радио, о которой идет речь, путем ссылки на форму вместе с правилом ввода радиоприемника, добавленным с именем класса (форма # changeRegionStdForm input [type = radio] .locRad). Я изначально сделал это с формой #, приведенной до ввода [type =. Только когда я переместил его после ввода [type =, радио кнопки выстроились горизонтально.

Надеюсь, это имеет смысл и на самом деле помогает кому-то другому.

Answer 3

Я нашел это сообщение очень поздно. Но я думал, что другие могут наткнуться на это, как сейчас.

попробовать что-то вроде этого:

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

Теперь стиль идентификатор HMenu. Это должно решить эту проблему.

Это без каких-либо стилей дает верные переключатели. Но если вы используете css-стиль на ul и li, вы можете буквально сделать его стоящим на голове!:)

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

Answer 6

Попробуйте это, я получил мой код работает через это ..

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