Çoktan seçmeli kutuları biçimlendirme

Question

Anlayışım, Materialize'in çoklu seçim kutularını desteklememesidir - tarayıcı varsayılanını belirtmeniz ve Materialise stilini kullanmamanız gerekir.

<a class='dropdown-button btn-flat' href='#' data-activates='topics_dropdown' data-hover="true"> 
Relates to topics...</a> 
<ul id='topics_dropdown' class='dropdown-content'> 
    <li> 
     <input type="checkbox" name="report[topics][409928004]" id="report_topics_409928004" value="1" /> 
     <label for="report_topics_409928004">Engagement</label> 
    </li> 
    <li> 
     <input type="checkbox" name="report[topics][669658064]" id="report_topics_669658064" value="1" /> 
     <label for="report_topics_669658064">Appraisal</label> 
    </li> 

    <!-- etc. --> 

</ul> 

Ama bu hale nasıl olur bir hata var: Ben böyle açılan iç onay kutularıyla Materialize açılan bir eşdeğer hale getirmeye çalıştık

(yanılıyorsam beni düzeltin). Metin ve kutular, aşağı doğru bir çizgi ile dengelenir, bu nedenle vurgulanan gezinme efekti, iki farklı seçeneği çakışan bir dikdörtgeni vurgular. Bu aksaklığı düzeltmenin bir yolu var mı?

İşte ekran görüntüsü. Yukarıdaki örnek kodla aynı içerik değil, aynı açılır-onay kutusu yapısı.

Answer 1

Benim geçici çözüm yerine O vurgulu etkisi yoktur

<a class='dropdown-button btn-flat' href='#' data-activates='topics_dropdown' data-hover="true"> Relates to topics...</a> 
<div id='topics_dropdown' class='dropdown-content'> 
    <div> 
     <input type="checkbox" name="report[topics][409928004]" id="report_topics_409928004" value="1" /> 
     <label for="report_topics_409928004">Engagement</label> 
    </div> 
    <div> 
     <input type="checkbox" name="report[topics][669658064]" id="report_topics_669658064" value="1" /> 
     <label for="report_topics_669658064">Appraisal</label> 
    </div> 

    <!-- etc. --> 

</div> 

açılır liste yapısını kullanarak daha açılır içeride kendi div her bir onay kutusunu koymak olmuştur, ama çalışıyor .

Answer 2

[type="checkbox"]+label { 
    display: inline; 
}