Zurb-foundation：在標籤標籤內部使用div

我現在正在爲我的第一個項目使用foundation，並且我真的很喜歡它提供的開箱即用功能，但我無法使用自定義收音機框。Zurb-foundation：在標籤標籤內部使用div

這個想法不僅包含單選按鈕標籤內的文本，還包含一個圖像和一些粗體文本。一旦我開始在標籤內部使用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選擇器沒有考慮標籤內部的額外標籤。

有沒有辦法使這項工作與基礎，或者我必須訴諸變通辦法（使整個文本加粗，把圖像放在標籤之外）？

來源

2013-10-10 Larzan

請上傳你想要做什麼快照，你現在在做了什麼 –

謝謝，但AM_解決方案看起來很有希望。最後，我使用了一種解決方法。 – Larzan

好問題，當我需要通過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;

來源

2013-10-10 19:32:38

謝謝，我不得不承認，我沒有檢查scss，我只是試圖通過分析js找出他們的選擇器。您的解決方案看起來很有前途，我已經使用了不同的解決方法，只需用js觸發單選按鈕我在點擊之前添加的圖像。我會嘗試解決您的解決方案，然後再使用它，因爲它是一個不需要JS的更清潔的解決方案。 – Larzan

Zurb-foundation：在標籤標籤內部使用div

回答

相關問題