Zurb-foundation: Использование divs внутри тега метки

Question

Я использую foundation для моего первого проекта прямо сейчас, и мне очень нравятся функциональные возможности, которые он предоставляет из коробки, , но У меня возникают проблемы с моими специальными радиокамерами.

Идея состоит в том, чтобы не только иметь текст внутри метки переключателей, но и изображение и полужирный текст. Как только я начну использовать либо img, либо bold тег внутри этикетки, выбор переключателя с помощью текста меток сломан.

кода я использую это

<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), вы можете увидеть, что они используют и 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;