标签显示略低于表格复选框？

Question

我希望我的文本与我的表单复选框一起显示 - 据我所知，这是相应的代码。出于某种原因，文本略低于复选框？请参阅下面的屏幕截图和代码。

的style.css

input, textarea, select, .uneditable-input {
  border: 2px solid #dbdbdb;
  width: 100%;
  margin-bottom: 15px;
  margin-top: 15px;
  border-radius: 5px;
  padding: 10px;

}

input {

   height: 35px;
   width: 325px;
   font-size: 16px;
}

input[type="radio"], input[type="checkbox"] {

    width: 30px;

}
    label {

        font-size: 18px;
        display: inline-block;
        font-weight: lighter;
        vertical-align: top;
    }

        label[for=receive_newsletters] {

            font-size: 12px;
            display: inline-block;

        }

        label[for=terms_accepted] {

            font-size: 12px;
            display: inline-block;

        }

new.html.erb

    <label for="receive_newsletters"><%= f.check_box :receive_newsletters %> I would like to receive newsletters</label>
    <label for="terms_accepted"><%= f.check_box :terms_accepted %> I agree to the Terms of Service & Privacy Policy</label>

    <%= f.submit :Register %>
  <% end %>

Answer 1

您应该从height: 35px;移除input或为height: auto指定input[type=checkbox]