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

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

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

这是实际页面的链接: https://www.dev.gonativeguide.com/de/tour-preferences?tid=12

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

谢谢，

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

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

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

祝你好运!