为Pardot表单设置CSS样式

Question

我有一个pardot(营销自动化工具)的形式，我想样式的输入字段，如名字，姓氏。公司和电子邮件的方式，他们应该垂直排列自己。它们都应该从同一个点开始。现在他们就从标签后面开始。pardot from输入字段的CSS如下：

#pardot-form input.text {
                border:none;
                height:20px;
                padding:9px 10px;
                font-size:16px;
                margin-bottom:10px;
                margin-left:5px;
            }
            #pardot-form .field-label {
                font-weight:normal;
                font-family:"proxima nova", arial, sans-serif;
                margin-bottom:5px;
                font-size:16px;
                color:white;

            }

我想以一个特定的输入文本为目标，例如公司，这样我就可以向左或向右移动它，使其与其正上方的输入文本对齐。我该怎么做呢？谢谢

Answer 1

输入字段的默认显示属性为" inline-block“，这允许它们与其他行内元素或行内块元素并排显示。

尝试将display: block添加到要垂直排列的每个输入。

感谢Louis Lazaris提供的默认显示属性：http://www.impressivewebs.com/default-css-display-values-html-elements/

Answer 2

将width设置为100%...see示例：

​

form.form {
  max-width: 600px !important;
}

form.form select,
form.form input.text,
form.form textarea.standard,
form.form input.date {
  width: 100% !important;
}

form.form p label {
  width: 100% !important;
}

<form accept-charset="UTF-8" method="post" class="form" id="pardot-form">
  <p class="form-field  first_name pd-text required required-custom">
    <label class="field-label">First Name</label>
    <input type="text" value="" class="text" size="30" maxlength="40" onchange="" />
  </p>
  <p class="form-field  last_name pd-text required required-custom">
    <label class="field-label">Last Name</label>
    <input type="text" value="" class="text" size="30" maxlength="80" onchange="" />
  </p>
  <p class="form-field  email pd-text required required-custom">
    <label class="field-label">Email</label>
    <input type="email" value="" class="text" size="30" maxlength="255" />
  </p>
  <p class="form-field  state pd-select required">
    <label class="field-label">State</label>
    <select class="select" onchange="">
      <option value=""></option>
      <option value="3431478">AB</option>
      <option value="3431480">AK</option>
      <option value="3431482">AL</option>
    </select>
  </p>
  <p class="form-field  opted_out pd-radio required">
    <label class="field-label">Tell me more:</label>
    <span class="value"><span class="" style=""><input type="radio" onchange="" /><label class="inline" >I would like to learn more about...</label></span>
    <span class="" style="">
      <input type="radio" onchange="" />
      <label class="inline">I am interested in...</label>
      </span>
    </span>
  </p>
  <p class="submit">
    <input type="submit" accesskey="s" value="SUBMIT" />
  </p>
</form>

​