Joomla Jform 单选按钮未与其标签水平对齐

Question

我正在开发一个自定义 Joomla 模块，该模块显示带有一些单选按钮的 JForm。我正在使用为 Joomla 3+ 样式描述的示例代码以及此处描述的任意值：https://docs.joomla.org/Radio_form_field_type

<field name="PrevVisits" type="radio" default="0" label="MOD_GNG_TOURPREF_PREV_VISITS" description="" class="btn-group">
                    <option value="Yes">MOD_GNG_TOURPREF_PREV_VISITS_YES</option>
                    <option value="Some">MOD_GNG_TOURPREF_PREV_VISITS_SOME</option>
                    <option value="No">MOD_GNG_TOURPREF_PREV_VISITS_NO</option>
</field>

我试图删除 class 标签，这样显示单选按钮，但按钮和相应的标签不是水平对齐的，而是在彼此下面：

screenshot

在下面的论坛回复中，我得到了以下提示：

Ok I see the issue. If you inspect the element for both the checkbox and radio, you'll notice the checkbox input is inside the label, but the radio input is before the label.

Checkbox:

<label for="main_Interests7" class="checkbox">
    <input type="checkbox" id="main_Interests7" name="main[Interests][]" value="language"> Sprache
</label>

Radio:

<input type="radio" id="main_PrevVisits0" name="main[PrevVisits]" value="Yes">
<label for="main_PrevVisits0">Ja</label>

So due to label having it's display property set to block, it will appear at 100% width on a separate line.

The markup for these should be the same, so I believe it's a template override that may have changed the markup.

https://joomla.stackexchange.com/questions/24531/jform-radio-button-not-displayed-or-not-horizontally-aligned-with-its-label/24534#24534

这里是 link 实际页面： https://www.dev.gonativeguide.com/de/tour-preferences?tid=12

我的问题是，基于上述假设，即我的模板覆盖了正常的单选框行为，我如何确定我的模板的哪一部分导致了这个问题，以及我需要做什么才能真正修复它？

谢谢， W.

Answer 1

这里有两个简单的 CSS 建议： https://codepen.io/panchroma/pen/axeKPG

/* Option 1 - horizontal */
#main_PrevVisits label{
  display:inline-block !important;
  margin-right:20px
} 


/* Option 2 - vertical */
#main_PrevVisits label{
  display:inline;
}

#main_PrevVisits label:after{
  content: "";
  display: table;
  clear: both;
}

你的问题的原因是 https://www.dev.gonativeguide.com/templates/theme1990/css/bootstrap.css 的第 884 行 CSS 设置了

label {
    display: block;
}

因此单选标签不会与单选按钮共用一行。

... 并回答有关如何找出模板的哪一部分负责的问题，Web 检查器是您进行此类故障排除的 goto 工具。检查您感兴趣的元素，即单选标签。

祝你好运！

Joomla Jform 单选按钮未与其标签水平对齐

Joomla Jform radio button not horizontally aligned with its label

css

radio-button

joomla3.0