Как я могу расположить радио кнопки горизонтально, а не вертикально?

Question

Я смотрю на Кулинарную книгу - 7.3.3 Автоматические элементы формы , пытаясь найти способ, чтобы переключатели располагались горизонтально, а не вертикально. Я смотрел на '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;
}

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

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

Answer 2

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

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

используйте это:

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

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

Попробуйте что-то вроде этого:

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

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

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>