将float属性应用于复选框，然后无法单击ckeckbox？

Question

要实现此目的，我已经制作了以下代码

.ContentList {
    padding: 5px;
    border-radius: 5px;
    margin-bottom:20px;
    -webkit-box-shadow: 0px 0px 2px 2px rgba(148,135,148,1);
    -moz-box-shadow: 0px 0px 2px 2px rgba(148,135,148,1);
    box-shadow: 0px 0px 2px 2px rgba(148,135,148,1);
}

    .ContentList .ItemCells {
        width: 270px;
        height: 150px;
        margin: 10px;
        border: solid 1px;
    }

    .ContentList .ItemCellsTitle {
        width: inherit;
        height: 50px;
        border: solid 1px orange;
        vertical-align: middle;
    }

.ItemCellsTitle h4 {
    position: relative;
    top: 7px;
    left: 5px;
}

.ItemCellsContent {
    border: solid 1px green;
    height: 65%;
}

/*.SelectionIndicator {
    float:left;
    margin: 10px 5px 10px 10px;
}*/

input[type="checkbox"] {
    float:left;
    margin: 10px 5px 10px 10px;
}

<div class="ContentList">
        <asp:DataList ID="dlContentList" runat="server" RepeatDirection="Horizontal" RepeatColumns="3">
            <ItemTemplate>

                <div class="ItemCells">
                    <div class="ItemCellsContent">
                        <%# DataBinder.Eval(Container.DataItem,"ContentCD") %>
                    </div>
                    <div class="ItemCellsTitle">
                        <asp:CheckBox ID="cbContentID" runat="server" />
                 
                        <h4>
                            <%# DataBinder.Eval(Container.DataItem,"ContentTitle") %></h4>
                    </div>
                </div>
            </ItemTemplate>
        </asp:DataList>
    </div>

这提出了一个新问题，我无法再单击复选框。如果我将鼠标悬停在它上面，我没有任何关注复选框（默认行为）。但是，如果我删除复选框的浮动属性，那么它正在工作很好，我可以选择和取消选择它。为什么我申请浮动财产时无法点击复选框

删除float属性后的参考

谢谢......

Answer 1

移除浮动并且不要在H4中包装文本。相反，设置ItemCellsTitle类的样式以模仿您正在寻找的H4样式 - 或者，您可以更改H4的CSS并将显示设置为内联。如果移除浮动，任何一个都可以工作。