html - Div 没有向左浮动

Question

我有一个表单和一个容器 div。容器 div 如下所示:

容器

.container {
  margin-left: auto;
  margin-right: auto;
  width: 500px;

然后在容器内我有带有面板类的 div:

面板

.panel {
  width: 50%;
  float: left;

但出于某种原因，面板没有 float 到容器的末端？

这里是完整的html

HTML

<div class="container">
<%= form_with(model: fee_change_submission, local: true) do |form| %>
  <div class="panel">
    <%= form.label :account_name, class: "panel__top-label" %>
    <%= form.text_field :account_name, class: "panel__top-input" %>
  </div>

  <div class="panel">
  <%= form.label :account_number, class: "panel__top-label" %>
  <%= form.text_field :account_number, class: "panel__top-input" %>
  </div>
<% end %>
</div>

CSS

.container {
      margin-left: auto;
      margin-right: auto;
      width: 500px;

      h1 {
        text-align: left;
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ddd;
      }

      // All Forms
      form {
        .panel {
          width: 50%;
          float: left;

          &__top-input {
            width: 100%;
            text-align: left;
          }

          &__top-label {
            width: 100%;
            text-align: left;
            color: $gray-color;
          }

          .btn {
            width: 100px;
          }
        }
      }
    }

截图:

这是问题的图片。如您所见，我已将宽度设置为 50%，但它没有向左浮动。

Answer 1

您的 CSS“没有问题”。我不得不删除一个 scss 变量，它会采用之后的样式，color: $gray-color;。我认为问题在于您不知道这是 scss 代码，或者您可能知道？

.container {
  margin-left: auto;
  margin-right: auto;
  width: 500px;
}
.container h1 {
  text-align: left;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}
.container .form .panel {
  width: 50%;
  float: left;
}
.container .form .panel__top-input {
  width: 100%;
  text-align: left;
}
.container .form .panel__top-label {
  width: 100%;
  text-align: left;
  color: gray;
}
.container .form .panel .btn {
  width: 100px;
}

<div class="container">
  <form action="" class="form">
    <div class="panel">
      <label for="" class="panel__top-label" />
      <input type="text" class="panel__top-input" />
    </div>

    <div class="panel">
      <label for="" class="panel__top-label" />
      <input type="text" class="panel__top-input" />
    </div>

    <div class="panel">
      <label for="" class="panel__top-label" />
      <input type="text" class="panel__top-input" />
    </div>

    <div class="panel">
      <label for="" class="panel__top-label" />
      <input type="text" class="panel__top-input" />
    </div>
  </form>
</div>

这是修改后的scss

.container {
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  h1 {
    text-align: left;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
  }
  .form {
    .panel {
      width: 50%;
      float: left;
      &__top-input {
        width: 100%;
        text-align: left;
      }
      &__top-label {
        width: 100%;
        text-align: left;
        color: gray; // change this
      }
      .btn {
        width: 100px;
      }
    }
  }
}