如何在一行中显示2个复选框？

Question

我在WooCommerce中有复选框过滤器，并且希望将其对齐为一行中的两个复选框，然后将第二行中的两个复选框等对齐。这是URL，其中问题可见。我希望这种风格也适用于“产品颜色”和“产品尺寸”。

怎么做？

当前的CSS是：

.woof_list li {
list-style: none !important;
padding: 0 0 5px 0 !important;
}

看起来像：

Answer 1

您可以在父级上使用display: flex; flex-wrap: wrap;，然后将子级上的flex-basis设置为您想要的宽度，然后考虑任何水平空间（如边距）。

＆＃13;

＆＃13;

.woof_list_checkbox {
  display: flex;
  flex-wrap: wrap;
}
.woof_list_checkbox li {
  margin: 0 3px 0 3px !important;
  flex-basis: calc(50% - 6px);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;