Question

我有一个pardot（营销自动化工具）表单，我想设置输入字段的样式，例如名字，姓氏。公司和电子邮件，他们应该垂直对齐，即。他们都应该从同一点开始。现在他们就在标签后面开始。来自输入字段的pardot的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

将宽度设置为100％...参见示例：

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>

为Pardot表单设置CSS样式

2 个答案: