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

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 属性，那么它就可以工作了很好，我可以选择和取消选择它。为什么我在应用 float 属性时无法单击复选框

供您删除 float 属性后引用

谢谢......

Answer 1

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