我正在尝试将 HTML pardot 表单放入 optinmonster 的浮动页脚选项中。
我想让所有三个字段都内联，它们被表示，但按钮也内联。有人可以帮我将按钮与字段内联吗？
HTML：
<form accept-charset="UTF-8" method="post" action="http://www2.achieveit.com/l/147781/2017-05-10/253zzn" class="form" id="pardot-form">
<p class="form-field Full_Name pd-text required required-custom "> <label class="field-label" for="147781_35111pi_147781_35111">Full Name *</label> <input type="text" name="147781_35111pi_147781_35111" id="147781_35111pi_147781_35111" value="" class="text" size="30" maxlength="65535" onchange="" /> <span id="error_for_147781_35111pi_147781_35111"
style="display:none"></span> </p>
<p class="form-field phone pd-text required required-custom "> <label class="field-label" for="147781_35077pi_147781_35077">Phone *</label> <input type="text" name="147781_35077pi_147781_35077" id="147781_35077pi_147781_35077" value="" class="text" size="30" maxlength="40" onchange="" /> <span id="error_for_147781_35077pi_147781_35077"
style="display:none"></span> </p>
<p class="form-field email pd-text required required-custom "> <label class="field-label" for="147781_35079pi_147781_35079">Corporate Email *</label> <input type="text" name="147781_35079pi_147781_35079" id="147781_35079pi_147781_35079" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 147781, 35079, 27620989);"
/> <span id="error_for_147781_35079pi_147781_35079" style="display:none"></span> </p>
<p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;"> <label for="pi_extra_field">Comments</label> <input type="text" name="pi_extra_field" id="pi_extra_field" /> </p>
<!-- forces IE5-8 to correctly submit UTF8 content --><input name="_utf8" type="hidden" value="☃" />
<p class="submit"> <input type="submit" accesskey="s" value="Submit Request" /> </p>
CSS：
html div#om-hdg1tmojgfiv0dyjbqou {
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: "Raleway", Helvetica, Arial, sans-serif;
}
form {
width: 100%;
padding: 0;
color: #fff;
overflow: hidden;
font-family: "Raleway", Helvetica, Arial, sans-serif;
text-align: center;
float: left;
}
form > * {
text-align: left;
}
form.form .errors {
font-size: .75em;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 20px;
}
.description {
font-size: .65em;
opacity: .5;
margin-top: 5px;
display: inline-block;
}
.description a {
color: #17AB51;
}
.error.no-label {
font-size: .5em;
position: relative;
top: 0px;
right: 0px;
}
form.form p {
color: #414042;
width: 100%;
margin: 0 0 25px;
margin-right: 0%;
position: relative;
}
form.form p:nth-child(even) {
margin-right: 0;
}
form.form p label {
color: #414042;
display: block;
text-transform: uppercase;
font-size: .9em;
font-weight: 100;
margin-bottom: 5px;
}
form.form p.hidden {
position: absolute;
width: 190px;
left: -9999px;
top: -9999px;
}
form.form p input {
padding: 15px 12px;
color: #414042;
width: 100%;
font-size: 1em;
border: 1px solid #CCCDCD;
transition: all .2s;
font-weight: 100;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-variant-numeric: lining-nums;
}
form.form p.error input {
border: 1px solid #8D2008;
}
form.form p input:focus {
outline: none;
box-shadow: none;
border: 1px solid #17AB51;
}
form.form p select {
padding: 15px 12px;
color: #414042;
width: 100%;
font-size: 1em;
border: 1px solid #CCCDCD;
border-radius: 0;
background: #fff url(https://www.achieveit.com/wp- content/themes/achieveit/assets/img/chevron-down.png) 97% 50% no-repeat;
background-size: 25px;
transition: all .2s;
font-weight: 100;
font-family: "Raleway", Helvetica, Arial, sans-serif;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
}
form.form p.error select {
border: 1px solid #8D2008;
}
form.form p select:focus {
outline: none;
box-shadow: none;
border: 1px solid #17AB51;
}
form.form p textarea {
padding: 15px 12px;
color: #414042;
width: 100%;
font-size: 1em;
border: 1px solid #CCCDCD;
height: 100px;
transition: all .2s;
font-weight: 100;
}
form.form p.error textarea {
border: 1px solid #8D2008;
}
form.form p textarea:focus {
outline: none;
box-shadow: none;
border: 1px solid #17AB51;
}
form.form p.submit {
clear: both;
width: auto;
display: inline;
margin: 0 auto 25px;
text-align: center;
font-weight: 100;
}
form.form p.submit input[type="submit"] {
border: 0px solid #fff;
text-transform: uppercase;
color: #fff;
display: block;
width: auto;
padding-right: 5%;
padding-left: 5%;
background: #17AB51;
background-size: 10px;
transition: all .2s;
font-weight: 100;
font-family: "Raleway", Helvetica, Arial, sans-serif;
}
form.form p.submit input[type="submit"]:hover {
color: #fff;
background: #149141;
background-size: 20px;
}
form.form p.smalltext {
font-size: .5em;
color: #414042;
text-align: center;
float: none;
clear: both;
width: auto;
}
form.form p.smalltext a {
color: #414042;
text-decoration: underline;
}
@media screen and (min-width: 720px) {
form.form p {
/*width: 48%; float: left; margin-right: 4%; position: relative;*/
width: 20%;
float: left;
/*margin-right: 3%;*/
padding: 0 1%;
position: relative;
display: block;
vertical-align: top;
text-align: left;
}
form.form p:nth-child(even) {
margin-right: 0;
}
.error.no-label {
font-size: .5em;
position: absolute;
top: 6px;
right: 10px;
}
}
Here is my work: https://codepen.io/a_shelley/pen/ZKqZoo