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

Question

我现在正在使用基座进行我的第一个项目，我非常喜欢它提供的开箱即用的功能，但是，但是，我的自定义无线电台有问题。

其想法不仅是在单选按钮标签内有文本，而且要有图像和一些粗体文本。一旦我开始使用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;