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

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

好的，我看到了问题。如果您同时检查两个复选框的元素   和广播，您会注意到复选框输入位于标签内，但是   无线电输入在标签之前。

复选框：

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

收音机：

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

因此，由于标签的显示属性设置为“阻止”，因此它将   在另一行上以100％的宽度显示。

这些标记应相同，因此我认为它是模板   覆盖可能已更改标记的覆盖。

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

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

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

祝你好运！

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

1 个答案: