css - 使用 CSS 垂直对齐复选框

Question

致力于将我们网站上的一些表格转换为我们新的电子邮件平台（Pardot，Salesforce 的一部分）。使用他们的 CSS 编辑器创建表单，但我在 CSS 方面没有太多经验。我让复选框的所有标签垂直对齐，但它们位于对角线而不是垂直线。关于如何解决这个问题的任何提示？

我还附上了一张表格在网站上的样子。

这是CSS：

pardot-form input[type="checkbox"] {
  background-color: #fff;
  color: #666;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 1.75em;
  height:18px;
  width:18px;
  padding:0;
  margin-top:5px;
  display:block;
  float:left;
}

Answer 1

这对你有用吗？我从现有的 Pardot 表单中提取了一些基本的表单元素。

form.form input[type="checkbox"] {
    background-color: #fff;
    color: #666;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    line-height: 1.75em;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-top: 5px;
    display: inline;
}

    <form class="form">
     <p class="form-field company col-sm-12 Main_Alarm_Equipment_Used pd-checkbox required required-custom    ">
      <label class="field-label" for="1">Which mailing lists would you like to sign up for? (Check all that apply)*</label>
      <span class="value"> <span>
      <input type="checkbox" name="2" id="2" value="598212" onchange="">
      <label class="inline" for="2">General Information</label>
      </span> <span>
      <input type="checkbox" name="3" id="3" value="598214" onchange="">
      <label class="inline" for="3">Membership</label>
      </span> <span>
      <input type="checkbox" name="4" id="4" value="598216" onchange="">
      <label class="inline" for="4">Alumni</label>
      </span> <span>
      <input type="checkbox" name="5" id="5" value="598218" onchange="">
      <label class="inline" for="5">Show</label>
      </span> <span>
      <input type="checkbox" name="6" id="6" value="598220" onchange="">
      <label class="inline" for="6">Band</label>
      </span> </span> </p>
    </form>