垂直显示 CakePHP 单选按钮

Question

我有这个单选按钮，我希望选项垂直显示。

$options = array(
    'LastMonth' => 'Last full month', 
    'Last30' => 'Last 30 days', 
    'LastYear' => 'Last full year', 
    'Last365' => 'Last 365 days', 
    'Custom' => 'Custom'
);
echo $this->Form->input('rank', array(
    'type' => 'radio',
    'legend' => false,
    'options' => $options,
    'selected' => 'LastMonth'
));

这是水平显示所有选项，我需要它们垂直显示。谢谢！！

编辑：现在它显示这样的选项。

HTML:

<div class="vertical-radio-buttons">
    <div class="input radio">
        <input type="hidden" name="data[StatsComponents][rank]" id="StatsComponentsRank_" value="">
        <input type="radio" name="data[StatsComponents][rank]" id="StatsComponentsRankLastMonth" value="LastMonth">
        <label for="StatsComponentsRankLastMonth">Last full month</label>
        <input type="radio" name="data[StatsComponents][rank]" id="StatsComponentsRankLast30" value="Last30">
        <label for="StatsComponentsRankLast30">Last 30 days</label>
        <input type="radio" name="data[StatsComponents][rank]" id="StatsComponentsRankLastYear" value="LastYear">
        <label for="StatsComponentsRankLastYear">Last full year</label>
        <input type="radio" name="data[StatsComponents][rank]" id="StatsComponentsRankLast365" value="Last365">
        <label for="StatsComponentsRankLast365">Last 365 days</label>
        <input type="radio" name="data[StatsComponents][rank]" id="StatsComponentsRankCustom" value="Custom">
        <label for="StatsComponentsRankCustom">Custom</label>
    </div>
</div>

Answer 1

这主要是一个 css 问题：将每个 label 和 input 对放在 <div> 中将解决问题。在 CakePHP 1.3 中，您可以使用 before、separator 和 after 选项来完成此操作：

echo $this->Form->input('rank', array(
    'type' => 'radio',
    'legend' => false,
    'options' => $options,
    'selected' => 'LastMonth',
    'before' => '<div>',
    'separator' => '</div><div>',
    'after' => '</div>',
));

垂直显示 CakePHP 单选按钮

Display CakePHP Radio Buttons vertically

css

styles

cakephp

radio-button

cakephp-1.3