Div不向左浮动

Question

我有一个表单和一个容器div。容器div看起来像这样：

容器

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

然后在容器内部我有div类的面板：

PANEL

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

但由于某种原因，面板没有浮动到它的容器的末端？

这是完整的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

有没有错误＆＃34;与你的CSS。我不得不删除一个scss变量，之后会采用这些样式color: $gray-color;。我认为问题是你不知道这是scss代码，还是你做过的mabye？

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是编辑过的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;
      }
    }
  }
}