使用 CakePHP 4 垂直对齐单选按钮

Question

我的问题

我正在使用 cakephp 4 FormHelper 在我的页面上创建一些单选按钮。它将创建单选按钮，但它会像下图一样水平显示它们，但我希望它们垂直显示。

我的代码

index.php:

    <div class="meetingRadioBox">
      <?php 
        echo $this->Form->label('location', 'Location:', ['class' => 'meetingLabel']);
        echo "</br>";
      ?>
      <div class="separatorLine"></div> 
      <?php
        echo $this->Form->radio('location',
          [
            ['value' => 'LocationA', 'text' => 'Location A'],
            ['value' => 'LocationB', 'text' => 'Location B'],
          ],
          ['class' => 'meetingRadio', 'required' => 'true']
        );
        echo "</br>";
        echo $this->Form->label('host', 'Gesprek met:', ['class' => 'meetingLabel']);
        echo "</br>";
      ?>
    </div>

index.css:

    .meetingRadio{
      font-weight: normal;
      width: 40px;
      height: 20px;
      vertical-align: middle;
    }

    .meetingRadioBox{
      padding-bottom: 20px;
    }

    .meetingRadioBox{  
      border-top: 1px solid #C4C4C4;
      margin-bottom: 15px;
    }

    .meetingLabel{
       text-align: left;
       font: normal normal bold 16px/38px Open;
       font-family: sans-serif;
       letter-spacing: 0px;
       width: 50%;
       padding-top: 20px;
       color: #1D1D1B;
       opacity: 1;
     }

检查 chrome 中的页面时 html 的样子：

    <div class="meetingRadioBox">
      <label class="meetingLabel" for="location">Location:</label><br>
      <div class="separatorLine"></div> 
      <input type="hidden" name="location" value="">
      <label for="location-locationa">
        <input type="radio" name="location" value="LocationA" id="location-locationa" required="required" class="meetingRadio">
          Location A
      </label>
      <label for="location-locationb">
        <input type="radio" name="location" value="LocationB" id="location-locationb" required="required" class="meetingRadio">
          Location B
      </label>
      <br>
    </div>

我已经试过了

另一个 post 我看过的是这个：我尝试在 CakePHP 4 中使用相同的解决方案，如下所示，但这对我不起作用

    echo $this->Form->radio('location',
      [
        ['value' => 'LocationA', 'text' => 'Location A'],
        ['value' => 'LocationB', 'text' => 'Location B'],
      ],
      ['class' => 'meetingRadio', 'required' => 'true', 'before' => '<div>', 'separator' => '</div><div>', 'after' => '</div>']
    );

我也尝试在我的 css 中添加一个 {display: block;} 但正如您在下图中看到的那样，这只会让情况变得更糟

    .meetingRadio{
      font-weight: normal;
      width: 40px;
      height: 20px;
      vertical-align: middle;
      display: block;
    }

更改 css 后：

我确实设法让它垂直对齐，但这里的问题是只有 bottem 单选按钮有效，当我 select 在我的控制器中提交请求之前的顶部选项是空的

非功能性 index.php:

    echo $this->Form->radio('location',
      [['value' => 'LocationA', 'text' => 'Location A'],],
      ['class' => 'meetingRadio', 'required' => 'true']
    );
    echo "</br>";
    echo $this->Form->radio('location',
      [['value' => 'LocationB', 'text' => 'Location B'],],
      ['class' => 'meetingRadio', 'required' => 'true']
    );
    echo "</br>";

感谢任何帮助，

谢谢！

Answer 1

将cssclass添加到输入标签：

php:

<?php
        echo $this->Form->radio('location',
          [
            ['value' => 'LocationA', 'text' => 'Location A', 'label' => ['class' => 'label']],
            ['value' => 'LocationB', 'text' => 'Location B', 'label' => ['class' => 'label']],
          ],
          ['class' => 'meetingRadio', 'required' => 'true']
        );

生成如下内容：

<div class="meetingRadioBox">
  <label class="meetingLabel" for="location">Location:</label><br>
  <div class="separatorLine"></div> 
  <input type="hidden" name="location" value="">
  <label class="label" for="location-locationa">
    <input type="radio" name="location" value="LocationA" id="location-locationa" required="required" class="meetingRadio">
      Location A
  </label>
  <label class="label" for="location-locationb">
    <input type="radio" name="location" value="LocationB" id="location-locationb" required="required" class="meetingRadio">
      Location B
  </label>
  <br>
</div>

和css：

.label {
   display: block;
 }

阅读更多https://book.cakephp.org/4/en/views/helpers/form.html#creating-radio-buttons

使用 CakePHP 4 垂直对齐单选按钮

Aligning radio button's vertically with CakePHP 4

html

css

cakephp

radio-button

cakephp-4.x