Question

我有一个表单，用户可以通过复选框从列表中选择一个或多个选项。它们使用column-count CSS属性分解为多个列。这适用于所有浏览器（我在Windows上），但我的同事使用Mac和Chrome有一个问题，他只能从第一列项目中选择。为什么会发生这种情况以及可以做些什么？

<div id="div_id_step_three-amenities" class="control-group"><label for="id_step_three-amenities" class="control-label">
            Amenities: 
        </label><div class="controls"><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_1" value="5">A/V Equipment
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_2" value="8">Catering Available
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_3" value="11">Full Bar
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_4" value="20">Rooftop
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_5" value="1">Pool
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_6" value="2">WiFi
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_7" value="3">Rooms Available
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_8" value="6">Valet Parking
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_9" value="7">Street Parking
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_10" value="9">Outside Catering
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_11" value="10">BYOB
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_12" value="12">Beer/Wine Only
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_13" value="13">No Drinking Allowed
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_14" value="16">Kosher
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_15" value="17">Spa
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_16" value="18">Indoor
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_17" value="19">Outdoor
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_18" value="21">Handicap Accessible
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_19" value="22">Smoking
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_20" value="23">Non-Smoking
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_21" value="24">Non-Union
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_22" value="25">Coat Check
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_23" value="26">Great Views
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_24" value="27">Theater
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_25" value="28">Media Room
    </label><label class="checkbox inline"><input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_26" value="29">Beachfront
    </label></div></div>

        .wizard #div_id_step_three-event_type .controls, .wizard #div_id_step_three-amenities .controls {
        -moz-column-count: 3;
        -moz-column-gap: 0;
        -webkit-column-count: 3;
        -webkit-column-gap: 0;
        column-count: 3;
    }

Answer 1

为您的标签添加for attribute，例如：

<label class="checkbox inline" for="id_step_three-amenities_2">
  <input type="checkbox" name="step_three-amenities" id="id_step_three-amenities_2" value="8">Catering Available
</label>

Answer 2

可能是因为你错过了column-gap

它应该是以下值

column-gap: 3px
column-gap: 2.5em
column-gap: normal    
column-gap: inherit

参考链接

https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap

.wizard #div_id_step_three-event_type .controls, .wizard #div_id_step_three-amenities .controls {
        -moz-column-count: 3;
        -moz-column-gap:normal;
        -webkit-column-count: 3;
        -webkit-column-gap: normal;
        column-count: 3;
        column-gap:normal;
    }

用户只能使用column-count css属性从复选框的第一列中进行选择

2 个答案: