У меня есть эта встроенная форма, но вот что важно: почему display: inline-block выглядит плохо и оставляет поля «submit» и «terms» немного выше, чем поле электронной почты? И КАК ЭТО РЕШИТЬ?
Я пробовал класс c "margin-top", но он просто не работает. Позвольте мне поделиться с вами фрагментом кода, который я использовал.
var coll = document.getElementsByClassName("open-terms");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("close-terms");
var content = document.getElementById("terms-wrapper");
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
body {
font-family: century-gothic, 'AppleGothic';
}
#mlist-email {background-color: white; border: white solid 1px; font-size: 12px; font-family: inherit; text-transform: capitalize; padding: 0 22.5px 0 22.5px; height: 45px; font-family: century-gothic, sans-serif; letter-spacing: 0; font-weight: 400; font-size: 14px;}
#mlist-email:focus {outline: none;}
#close-chimpy {float: right; margin-right: 5px; letter-spacing: 6px; color: black; text-transform: uppercase;}
#close-chimpy:hover {color: rgb(181,57,102)}
#button-wrapper {text-align: center; position: absolute; bottom: 30px; right: 30px;}
.mlist-trigger {background-color: pink; padding: 20px; font-family: century-gothic, 'AppleGothic'; width: 250px; cursor: pointer; transition: 0.3s;}
.mlist-trigger:hover {opacity: 0.7;}
#chimpy-lightbox input[type="email"]::placeholder {color: black;}
#chimpy-lightbox {font-family: century-gothic, 'AppleGothic'; z-index: 2008; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.7); display: none;}
@media only screen and (max-width: 374px) {
#chimpy-lightbox input[type="submit"] {padding: 0 !important; width: 68% !important;}
.mlist-submit-wrapper {width: 100%; margin-left: 0; padding-top: 15px;} #mlist-email-wrapper {width: 100%; margin-left: 0;}
}
.open-terms {cursor: pointer; width: 100%; border: none; color: black; text-align: left; outline: none; font-size: 15px;}
.close-terms:hover:after, .open-terms:hover:after {color: red;}
.open-terms:after {content: 'Terms'; color: black; text-transform: uppercase; font-weight: bold; margin-left: 5px;}
.close-terms:after {content: "Hide"; text-transform: uppercase;}
.content {padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1;}
<link rel="stylesheet" href="https://use.typekit.net/oov2wcw.css">
<form name="mlist-form-validate" method="post" id="mlist-form">
<div id="mlist-form-wrapper" style="padding-top: 200px; text-align: center;">
<div id="mc_embed_signup_scroll">
<h2 style="text-transform: uppercase; letter-spacing: 6px;">Join</h2>
<div class="mlist-email-wrapper" style="display: inline-block; vertical-align: top;">
<label id="email-error" style="font-size: 10px; color: #ff0000; text-align: left; float: left; padding-top: 0px; display: none;"></label><br>
<input oninvalid="" type="email" value="" placeholder="email" name="EMAIL" class="required email" id="mlist-email" required><br>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f206f10b38a504434c650c6bf_5ce815006b" tabindex="-1" value=""></div>
<div class="mlist-submit-wrapper" style="display: inline-block; white-space: nowrap"><input type="submit" value="Submit" name="subscribe" id="mlist-submit" class="button" required><br><a href="javascript:void(0)" class="open-terms"><span></span></a></div>
<div class="content" id="terms-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</form>