Question

我现在正在使用foundation作为我的第一个项目，我非常喜欢它提供的开箱即用功能，但我的自定义收音机盒出现问题。

这个想法不仅是单选按钮标签内的文本，还有图像和一些粗体文本。只要我开始在标签内使用 img 或粗体标签，就会打破通过标签文本选择的单选按钮。

我正在使用的代码就是这个

<label for="radio2">
    <img src="img/nho_musicians_flute.png">
    <input name="radio2" type="radio" id="radio2" style="display:none;" CHECKED>
    <span class="custom radio checked"></span>
    <b>Radio</b> Button 1
</label>

有了它，只能通过直接点击它来选择一个收音机盒，单击文本或图像导致不稳定的选择，似乎基础JS选择器没有考虑标签内的额外标签。

有没有办法让这个工作与基础，或者我必须求助于解决方法（使整个文本变粗并将图像放在标签之外）？

Answer 1

好问题，当我需要通过F4的自定义表单实现创建自定义表单时，我遇到了与您相同的问题。

如果您查看实现（custom.forms.scss），您可以看到他们使用:before和content: ""以便能够实现此目的。我怀疑为什么你不能在<span class="custom radio"></span>之后添加任何标签

现在您可以做的解决方法是将自定义元素等放在<span>元素中。这样可以正常工作，但由于宽度和高度非常小，看起来很奇怪。但从那时起，它只是一个造型的问题，直到你得到它看起来你想要的。这是一个使用绝对定位的非常简单的例子：

<span class="custom radio">
   <span style="position: absolute; top: 0; left: 0; width: 500px; margin-left: 30px;">
      <b>test</b> foo
   </span>
</span> &nbsp;

Zurb-foundation：在标签标签内使用div

1 个答案: