Ich habe Kontrollkästchen in WooCommerce Filter, und möchte es auf zwei Kontrollkästchen in einer Zeile, dann die nächsten zwei in der zweiten Zeile usw. .. Dies ist URL wo Problem sichtbar ist. Ich möchte, dass dieser Stil auch für "Produktfarbe" und "Produktgröße" gilt.Wie werden 2 Checkboxen in einer Zeile angezeigt?
Wie geht das?
Aktuelle CSS ist:
.woof_list li {
list-style: none !important;
padding: 0 0 5px 0 !important;
}
aussehen:
Sie display: flex; flex-wrap: wrap; auf dem übergeordneten verwenden können, legen Sie dann die flex-basis auf die Kinder auf die gewünschte Breite und berücksichtigen Sie dann jeden horizontalen Abstand (wie die Ränder).
.woof_list_checkbox {
display: flex;
flex-wrap: wrap;
}
.woof_list_checkbox li {
margin: 0 3px 0 3px !important;
flex-basis: calc(50% - 6px);
}<ul class="woof_list woof_list_checkbox">
<li class="woof_term_207 "><input type="checkbox" id="woof_207_5915ff69793c9" class="woof_checkbox_term woof_checkbox_term_207" data-tax="pa_size" name="1" data-term-id="207" value="207"><label class="woof_checkbox_label " for="woof_207_5915ff69793c9">1</label>
<input type="hidden" value="1" data-anchor="woof_n_pa_size_1">
</li>
<li class="woof_term_84 "><input type="checkbox" id="woof_84_5915ff6979423" class="woof_checkbox_term woof_checkbox_term_84" data-tax="pa_size" name="10" data-term-id="84" value="84"><label class="woof_checkbox_label " for="woof_84_5915ff6979423">10</label>
<input type="hidden" value="10" data-anchor="woof_n_pa_size_10">
</li>
<li class="woof_term_184 "><input type="checkbox" id="woof_184_5915ff6979464" class="woof_checkbox_term woof_checkbox_term_184" data-tax="pa_size" name="100" data-term-id="184" value="184"><label class="woof_checkbox_label " for="woof_184_5915ff6979464">100</label>
<input type="hidden" value="100" data-anchor="woof_n_pa_size_100">
</li>
<li class="woof_term_185 "><input type="checkbox" id="woof_185_5915ff69794bc" class="woof_checkbox_term woof_checkbox_term_185" data-tax="pa_size" name="105" data-term-id="185" value="185"><label class="woof_checkbox_label " for="woof_185_5915ff69794bc">105</label>
<input type="hidden" value="105" data-anchor="woof_n_pa_size_105">
</li>
<li class="woof_term_85 "><input type="checkbox" id="woof_85_5915ff6979513" class="woof_checkbox_term woof_checkbox_term_85" data-tax="pa_size" name="11" data-term-id="85" value="85"><label class="woof_checkbox_label " for="woof_85_5915ff6979513">11</label>
<input type="hidden" value="11" data-anchor="woof_n_pa_size_11">
</li>
<li class="woof_term_164 "><input type="checkbox" id="woof_164_5915ff6979568" class="woof_checkbox_term woof_checkbox_term_164" data-tax="pa_size" name="11-12" data-term-id="164" value="164"><label class="woof_checkbox_label " for="woof_164_5915ff6979568">11-12</label>
<input type="hidden" value="11-12" data-anchor="woof_n_pa_size_11-12">
</li>
<li class="woof_term_186 "><input type="checkbox" id="woof_186_5915ff69795c0" class="woof_checkbox_term woof_checkbox_term_186" data-tax="pa_size" name="110" data-term-id="186" value="186"><label class="woof_checkbox_label " for="woof_186_5915ff69795c0">110</label>
<input type="hidden" value="110" data-anchor="woof_n_pa_size_110">
</li>
<li class="woof_term_86 "><input type="checkbox" id="woof_86_5915ff697961b" class="woof_checkbox_term woof_checkbox_term_86" data-tax="pa_size" name="12" data-term-id="86" value="86"><label class="woof_checkbox_label " for="woof_86_5915ff697961b">12</label>
<input type="hidden" value="12" data-anchor="woof_n_pa_size_12">
</li>
<li class="woof_term_187 "><input type="checkbox" id="woof_187_5915ff6979671" class="woof_checkbox_term woof_checkbox_term_187" data-tax="pa_size" name="120" data-term-id="187" value="187"><label class="woof_checkbox_label " for="woof_187_5915ff6979671">120</label>
<input type="hidden" value="120" data-anchor="woof_n_pa_size_120">
</li>
<li class="woof_term_193 "><input type="checkbox" id="woof_193_5915ff69796c6" class="woof_checkbox_term woof_checkbox_term_193" data-tax="pa_size" name="13" data-term-id="193" value="193"><label class="woof_checkbox_label " for="woof_193_5915ff69796c6">13</label>
<input type="hidden" value="13" data-anchor="woof_n_pa_size_13">
</li>
<li class="woof_term_165 "><input type="checkbox" id="woof_165_5915ff6979716" class="woof_checkbox_term woof_checkbox_term_165" data-tax="pa_size" name="13-14" data-term-id="165" value="165"><label class="woof_checkbox_label " for="woof_165_5915ff6979716">13-14</label>
<input type="hidden" value="13-14" data-anchor="woof_n_pa_size_13-14">
</li>
<li class="woof_term_188 "><input type="checkbox" id="woof_188_5915ff6979765" class="woof_checkbox_term woof_checkbox_term_188" data-tax="pa_size" name="130" data-term-id="188" value="188"><label class="woof_checkbox_label " for="woof_188_5915ff6979765">130</label>
<input type="hidden" value="130" data-anchor="woof_n_pa_size_130">
</li>
<li class="woof_term_111 "><input type="checkbox" id="woof_111_5915ff69797b5" class="woof_checkbox_term woof_checkbox_term_111" data-tax="pa_size" name="14" data-term-id="111" value="111"><label class="woof_checkbox_label " for="woof_111_5915ff69797b5">14</label>
<input type="hidden" value="14" data-anchor="woof_n_pa_size_14">
</li>
<li class="woof_term_189 "><input type="checkbox" id="woof_189_5915ff6979805" class="woof_checkbox_term woof_checkbox_term_189" data-tax="pa_size" name="140" data-term-id="189" value="189"><label class="woof_checkbox_label " for="woof_189_5915ff6979805">140</label>
<input type="hidden" value="140" data-anchor="woof_n_pa_size_140">
</li>
<li class="woof_term_178 "><input type="checkbox" id="woof_178_5915ff697984c" class="woof_checkbox_term woof_checkbox_term_178" data-tax="pa_size" name="15" data-term-id="178" value="178"><label class="woof_checkbox_label " for="woof_178_5915ff697984c">15</label>
<input type="hidden" value="15" data-anchor="woof_n_pa_size_15">
</li>
<li class="woof_term_191 "><input type="checkbox" id="woof_191_5915ff69798a4" class="woof_checkbox_term woof_checkbox_term_191" data-tax="pa_size" name="15-16" data-term-id="191" value="191"><label class="woof_checkbox_label " for="woof_191_5915ff69798a4">15-16</label>
<input type="hidden" value="15-16" data-anchor="woof_n_pa_size_15-16">
</li>
<li class="woof_term_190 "><input type="checkbox" id="woof_190_5915ff69798fd" class="woof_checkbox_term woof_checkbox_term_190" data-tax="pa_size" name="150" data-term-id="190" value="190"><label class="woof_checkbox_label " for="woof_190_5915ff69798fd">150</label>
<input type="hidden" value="150" data-anchor="woof_n_pa_size_150">
</li>
<li class="woof_term_179 "><input type="checkbox" id="woof_179_5915ff6979954" class="woof_checkbox_term woof_checkbox_term_179" data-tax="pa_size" name="16" data-term-id="179" value="179"><label class="woof_checkbox_label " for="woof_179_5915ff6979954">16</label>
<input type="hidden" value="16" data-anchor="woof_n_pa_size_16">
</li>
<li class="woof_term_225 "><input type="checkbox" id="woof_225_5915ff69799ad" class="woof_checkbox_term woof_checkbox_term_225" data-tax="pa_size" name="160" data-term-id="225" value="225"><label class="woof_checkbox_label " for="woof_225_5915ff69799ad">160</label>
<input type="hidden" value="160" data-anchor="woof_n_pa_size_160">
</li>
<li class="woof_term_180 "><input type="checkbox" id="woof_180_5915ff6979a03" class="woof_checkbox_term woof_checkbox_term_180" data-tax="pa_size" name="17" data-term-id="180" value="180"><label class="woof_checkbox_label " for="woof_180_5915ff6979a03">17</label>
<input type="hidden" value="17" data-anchor="woof_n_pa_size_17">
</li>
<li class="woof_term_192 "><input type="checkbox" id="woof_192_5915ff6979a58" class="woof_checkbox_term woof_checkbox_term_192" data-tax="pa_size" name="17-18" data-term-id="192" value="192"><label class="woof_checkbox_label " for="woof_192_5915ff6979a58">17-18</label>
<input type="hidden" value="17-18" data-anchor="woof_n_pa_size_17-18">
</li>
<li class="woof_term_226 "><input type="checkbox" id="woof_226_5915ff6979aad" class="woof_checkbox_term woof_checkbox_term_226" data-tax="pa_size" name="170" data-term-id="226" value="226"><label class="woof_checkbox_label " for="woof_226_5915ff6979aad">170</label>
<input type="hidden" value="170" data-anchor="woof_n_pa_size_170">
</li>
<li class="woof_term_181 "><input type="checkbox" id="woof_181_5915ff6979b02" class="woof_checkbox_term woof_checkbox_term_181" data-tax="pa_size" name="18" data-term-id="181" value="181"><label class="woof_checkbox_label " for="woof_181_5915ff6979b02">18</label>
<input type="hidden" value="18" data-anchor="woof_n_pa_size_18">
</li>
<li class="woof_term_172 "><input type="checkbox" id="woof_172_5915ff6979b56" class="woof_checkbox_term woof_checkbox_term_172" data-tax="pa_size" name="19" data-term-id="172" value="172"><label class="woof_checkbox_label " for="woof_172_5915ff6979b56">19</label>
<input type="hidden" value="19" data-anchor="woof_n_pa_size_19">
</li>
<li class="woof_term_76 "><input type="checkbox" id="woof_76_5915ff6979bac" class="woof_checkbox_term woof_checkbox_term_76" data-tax="pa_size" name="2" data-term-id="76" value="76"><label class="woof_checkbox_label " for="woof_76_5915ff6979bac">2</label>
<input type="hidden" value="2" data-anchor="woof_n_pa_size_2">
</li>
<li class="woof_term_183 "><input type="checkbox" id="woof_183_5915ff6979c02" class="woof_checkbox_term woof_checkbox_term_183" data-tax="pa_size" name="2-3" data-term-id="183" value="183"><label class="woof_checkbox_label " for="woof_183_5915ff6979c02">2-3</label>
<input type="hidden" value="2-3" data-anchor="woof_n_pa_size_2-3">
</li>
<li class="woof_term_173 "><input type="checkbox" id="woof_173_5915ff6979c33" class="woof_checkbox_term woof_checkbox_term_173" data-tax="pa_size" name="20" data-term-id="173" value="173"><label class="woof_checkbox_label " for="woof_173_5915ff6979c33">20</label>
<input type="hidden" value="20" data-anchor="woof_n_pa_size_20">
</li>
<li class="woof_term_174 "><input type="checkbox" id="woof_174_5915ff6979c89" class="woof_checkbox_term woof_checkbox_term_174" data-tax="pa_size" name="21" data-term-id="174" value="174"><label class="woof_checkbox_label " for="woof_174_5915ff6979c89">21</label>
<input type="hidden" value="21" data-anchor="woof_n_pa_size_21">
</li>
<li class="woof_term_175 "><input type="checkbox" id="woof_175_5915ff6979cdf" class="woof_checkbox_term woof_checkbox_term_175" data-tax="pa_size" name="22" data-term-id="175" value="175"><label class="woof_checkbox_label " for="woof_175_5915ff6979cdf">22</label>
<input type="hidden" value="22" data-anchor="woof_n_pa_size_22">
</li>
<li class="woof_term_176 "><input type="checkbox" id="woof_176_5915ff6979d34" class="woof_checkbox_term woof_checkbox_term_176" data-tax="pa_size" name="23" data-term-id="176" value="176"><label class="woof_checkbox_label " for="woof_176_5915ff6979d34">23</label>
<input type="hidden" value="23" data-anchor="woof_n_pa_size_23">
</li>
<li class="woof_term_177 "><input type="checkbox" id="woof_177_5915ff6979d8e" class="woof_checkbox_term woof_checkbox_term_177" data-tax="pa_size" name="24" data-term-id="177" value="177"><label class="woof_checkbox_label " for="woof_177_5915ff6979d8e">24</label>
<input type="hidden" value="24" data-anchor="woof_n_pa_size_24">
</li>
<li class="woof_term_212 "><input type="checkbox" id="woof_212_5915ff6979de5" class="woof_checkbox_term woof_checkbox_term_212" data-tax="pa_size" name="25" data-term-id="212" value="212"><label class="woof_checkbox_label " for="woof_212_5915ff6979de5">25</label>
<input type="hidden" value="25" data-anchor="woof_n_pa_size_25">
</li>
<li class="woof_term_213 "><input type="checkbox" id="woof_213_5915ff6979e39" class="woof_checkbox_term woof_checkbox_term_213" data-tax="pa_size" name="26" data-term-id="213" value="213"><label class="woof_checkbox_label " for="woof_213_5915ff6979e39">26</label>
<input type="hidden" value="26" data-anchor="woof_n_pa_size_26">
</li>
<li class="woof_term_195 "><input type="checkbox" id="woof_195_5915ff6979e8f" class="woof_checkbox_term woof_checkbox_term_195" data-tax="pa_size" name="27" data-term-id="195" value="195"><label class="woof_checkbox_label " for="woof_195_5915ff6979e8f">27</label>
<input type="hidden" value="27" data-anchor="woof_n_pa_size_27">
</li>
<li class="woof_term_196 "><input type="checkbox" id="woof_196_5915ff6979ee5" class="woof_checkbox_term woof_checkbox_term_196" data-tax="pa_size" name="28" data-term-id="196" value="196"><label class="woof_checkbox_label " for="woof_196_5915ff6979ee5">28</label>
<input type="hidden" value="28" data-anchor="woof_n_pa_size_28">
</li>
<li class="woof_term_197 "><input type="checkbox" id="woof_197_5915ff6979f40" class="woof_checkbox_term woof_checkbox_term_197" data-tax="pa_size" name="29" data-term-id="197" value="197"><label class="woof_checkbox_label " for="woof_197_5915ff6979f40">29</label>
<input type="hidden" value="29" data-anchor="woof_n_pa_size_29">
</li>
<li class="woof_term_77 "><input type="checkbox" id="woof_77_5915ff6979f94" class="woof_checkbox_term woof_checkbox_term_77" data-tax="pa_size" name="3" data-term-id="77" value="77"><label class="woof_checkbox_label " for="woof_77_5915ff6979f94">3</label>
<input type="hidden" value="3" data-anchor="woof_n_pa_size_3">
</li>
<li class="woof_term_98 "><input type="checkbox" id="woof_98_5915ff6979fe9" class="woof_checkbox_term woof_checkbox_term_98" data-tax="pa_size" name="3-4" data-term-id="98" value="98"><label class="woof_checkbox_label " for="woof_98_5915ff6979fe9">3-4</label>
<input type="hidden" value="3-4" data-anchor="woof_n_pa_size_3-4">
</li>
<li class="woof_term_198 "><input type="checkbox" id="woof_198_5915ff697a01c" class="woof_checkbox_term woof_checkbox_term_198" data-tax="pa_size" name="30" data-term-id="198" value="198"><label class="woof_checkbox_label " for="woof_198_5915ff697a01c">30</label>
<input type="hidden" value="30" data-anchor="woof_n_pa_size_30">
</li>
<li class="woof_term_199 "><input type="checkbox" id="woof_199_5915ff697a077" class="woof_checkbox_term woof_checkbox_term_199" data-tax="pa_size" name="31" data-term-id="199" value="199"><label class="woof_checkbox_label " for="woof_199_5915ff697a077">31</label>
<input type="hidden" value="31" data-anchor="woof_n_pa_size_31">
</li>
<li class="woof_term_208 "><input type="checkbox" id="woof_208_5915ff697a0cd" class="woof_checkbox_term woof_checkbox_term_208" data-tax="pa_size" name="32" data-term-id="208" value="208"><label class="woof_checkbox_label " for="woof_208_5915ff697a0cd">32</label>
<input type="hidden" value="32" data-anchor="woof_n_pa_size_32">
</li>
<li class="woof_term_209 "><input type="checkbox" id="woof_209_5915ff697a122" class="woof_checkbox_term woof_checkbox_term_209" data-tax="pa_size" name="33" data-term-id="209" value="209"><label class="woof_checkbox_label " for="woof_209_5915ff697a122">33</label>
<input type="hidden" value="33" data-anchor="woof_n_pa_size_33">
</li>
<li class="woof_term_210 "><input type="checkbox" id="woof_210_5915ff697a17c" class="woof_checkbox_term woof_checkbox_term_210" data-tax="pa_size" name="34" data-term-id="210" value="210"><label class="woof_checkbox_label " for="woof_210_5915ff697a17c">34</label>
<input type="hidden" value="34" data-anchor="woof_n_pa_size_34">
</li>
<li class="woof_term_211 "><input type="checkbox" id="woof_211_5915ff697a1d3" class="woof_checkbox_term woof_checkbox_term_211" data-tax="pa_size" name="35" data-term-id="211" value="211"><label class="woof_checkbox_label " for="woof_211_5915ff697a1d3">35</label>
<input type="hidden" value="35" data-anchor="woof_n_pa_size_35">
</li>
<li class="woof_term_200 "><input type="checkbox" id="woof_200_5915ff697a227" class="woof_checkbox_term woof_checkbox_term_200" data-tax="pa_size" name="36" data-term-id="200" value="200"><label class="woof_checkbox_label " for="woof_200_5915ff697a227">36</label>
<input type="hidden" value="36" data-anchor="woof_n_pa_size_36">
</li>
<li class="woof_term_201 "><input type="checkbox" id="woof_201_5915ff697a27b" class="woof_checkbox_term woof_checkbox_term_201" data-tax="pa_size" name="37" data-term-id="201" value="201"><label class="woof_checkbox_label " for="woof_201_5915ff697a27b">37</label>
<input type="hidden" value="37" data-anchor="woof_n_pa_size_37">
</li>
<li class="woof_term_202 "><input type="checkbox" id="woof_202_5915ff697a2d1" class="woof_checkbox_term woof_checkbox_term_202" data-tax="pa_size" name="38" data-term-id="202" value="202"><label class="woof_checkbox_label " for="woof_202_5915ff697a2d1">38</label>
<input type="hidden" value="38" data-anchor="woof_n_pa_size_38">
</li>
<li class="woof_term_203 "><input type="checkbox" id="woof_203_5915ff697a326" class="woof_checkbox_term woof_checkbox_term_203" data-tax="pa_size" name="39" data-term-id="203" value="203"><label class="woof_checkbox_label " for="woof_203_5915ff697a326">39</label>
<input type="hidden" value="39" data-anchor="woof_n_pa_size_39">
</li>
<li class="woof_term_78 "><input type="checkbox" id="woof_78_5915ff697a37a" class="woof_checkbox_term woof_checkbox_term_78" data-tax="pa_size" name="4" data-term-id="78" value="78"><label class="woof_checkbox_label " for="woof_78_5915ff697a37a">4</label>
<input type="hidden" value="4" data-anchor="woof_n_pa_size_4">
</li>
<li class="woof_term_99 "><input type="checkbox" id="woof_99_5915ff697a3cf" class="woof_checkbox_term woof_checkbox_term_99" data-tax="pa_size" name="4-5" data-term-id="99" value="99"><label class="woof_checkbox_label " for="woof_99_5915ff697a3cf">4-5</label>
<input type="hidden" value="4-5" data-anchor="woof_n_pa_size_4-5">
</li>
<li class="woof_term_79 "><input type="checkbox" id="woof_79_5915ff697a404" class="woof_checkbox_term woof_checkbox_term_79" data-tax="pa_size" name="5" data-term-id="79" value="79"><label class="woof_checkbox_label " for="woof_79_5915ff697a404">5</label>
<input type="hidden" value="5" data-anchor="woof_n_pa_size_5">
</li>
<li class="woof_term_100 "><input type="checkbox" id="woof_100_5915ff697a459" class="woof_checkbox_term woof_checkbox_term_100" data-tax="pa_size" name="5-6" data-term-id="100" value="100"><label class="woof_checkbox_label " for="woof_100_5915ff697a459">5-6</label>
<input type="hidden" value="5-6" data-anchor="woof_n_pa_size_5-6">
</li>
<li class="woof_term_80 "><input type="checkbox" id="woof_80_5915ff697a4ad" class="woof_checkbox_term woof_checkbox_term_80" data-tax="pa_size" name="6" data-term-id="80" value="80"><label class="woof_checkbox_label " for="woof_80_5915ff697a4ad">6</label>
<input type="hidden" value="6" data-anchor="woof_n_pa_size_6">
</li>
<li class="woof_term_101 "><input type="checkbox" id="woof_101_5915ff697a503" class="woof_checkbox_term woof_checkbox_term_101" data-tax="pa_size" name="6-7" data-term-id="101" value="101"><label class="woof_checkbox_label " for="woof_101_5915ff697a503">6-7</label>
<input type="hidden" value="6-7" data-anchor="woof_n_pa_size_6-7">
</li>
<li class="woof_term_81 "><input type="checkbox" id="woof_81_5915ff697a55a" class="woof_checkbox_term woof_checkbox_term_81" data-tax="pa_size" name="7" data-term-id="81" value="81"><label class="woof_checkbox_label " for="woof_81_5915ff697a55a">7</label>
<input type="hidden" value="7" data-anchor="woof_n_pa_size_7">
</li>
<li class="woof_term_102 "><input type="checkbox" id="woof_102_5915ff697a5b0" class="woof_checkbox_term woof_checkbox_term_102" data-tax="pa_size" name="7-8" data-term-id="102" value="102"><label class="woof_checkbox_label " for="woof_102_5915ff697a5b0">7-8</label>
<input type="hidden" value="7-8" data-anchor="woof_n_pa_size_7-8">
</li>
<li class="woof_term_82 "><input type="checkbox" id="woof_82_5915ff697a602" class="woof_checkbox_term woof_checkbox_term_82" data-tax="pa_size" name="8" data-term-id="82" value="82"><label class="woof_checkbox_label " for="woof_82_5915ff697a602">8</label>
<input type="hidden" value="8" data-anchor="woof_n_pa_size_8">
</li>
<li class="woof_term_103 "><input type="checkbox" id="woof_103_5915ff697a653" class="woof_checkbox_term woof_checkbox_term_103" data-tax="pa_size" name="8-9" data-term-id="103" value="103"><label class="woof_checkbox_label " for="woof_103_5915ff697a653">8-9</label>
<input type="hidden" value="8-9" data-anchor="woof_n_pa_size_8-9">
</li>
<li class="woof_term_83 "><input type="checkbox" id="woof_83_5915ff697a6a8" class="woof_checkbox_term woof_checkbox_term_83" data-tax="pa_size" name="9" data-term-id="83" value="83"><label class="woof_checkbox_label " for="woof_83_5915ff697a6a8">9</label>
<input type="hidden" value="9" data-anchor="woof_n_pa_size_9">
</li>
<li class="woof_term_104 "><input type="checkbox" id="woof_104_5915ff697a6ff" class="woof_checkbox_term woof_checkbox_term_104" data-tax="pa_size" name="9-10" data-term-id="104" value="104"><label class="woof_checkbox_label " for="woof_104_5915ff697a6ff">9-10</label>
<input type="hidden" value="9-10" data-anchor="woof_n_pa_size_9-10">
</li>
</ul>
Nur eine Sache .. Warum Ihr Code nach der Zugabe, einer der Farben sind .. Seltsam nach unten bewegt. http://i.imgur.com/caQFaKn.png?1 – Dora
@Dora scheint zu funktionieren, wenn Sie die 'Marge' von diesen' li's entfernen und einfach 'flex-basis: 50 %' verwenden –