html - float 属性是否会影响复选框的功能？

Question

float 属性是否应该影响复选框的功能？

我有以下 Rails 表单

<%= simple_form_for @user do |f| %>
<ul class="publications">
  <% @citations.each do |publication| %>
      <li>
        <div class = "PublicationCheckbox"><%= check_box_tag "publications[]", publication[:id] %></div>
        <div class = "PublicationString">
             <b><%= publication[:title] %></b>
             <%= publication[:authors] %>.
             <i><%= publication[:journal] %></i>,
             <%= publication[:year] %>,
             <%= publication[:volume] %>:
             <%= publication[:pages] %>
        </div>
      </li>
  <% end %>
  <div class="actions">
    <%= f.submit "Add to profile" %>
  </div>

<%= link_to 'Show', @user %> |
<%= link_to 'Back', users_path %>

</ul>
<% end %>>

这是CSS

.publications {
    list-style: none;
    padding: 0;

    li {
        padding: 15px 0;
        border-top: 1px solid #e8e8e8;
        float: left;
       }

    .PublicationCheckbox{
        float: left;
       }

    .PublicationString {
        padding: 0px !important;
        padding-bottom: 10px !important;
        margin-left: 20px !important;
        float: left;
      }

      }

如上所示，复选框不会选中。如果我从复选框中删除 float 属性，它们就会起作用。

Answer 1

不， float 属性不会影响复选框的功能。但是，如果您 float 了一个复选框，并且它附近的另一个元素具有更高的 z-index 值和填充或边距，有时您会在复选框上获得一个不可见层，不允许您选择它。

我建议您使用 Chrome 开发工具检查复选框，看看复选框顶部是否有任何内容。您可能需要调整复选框的 z-index，使其位于最上层。