Получить форму mailchimp в одну строку с помощью CSS

Question

Я пытаюсь получить форму для встраивания mailchimp в одну строку, вызов для регистрации, поле ввода и кнопку отправки. Я попытался следовать этому ответу здесь: https://codepen.io/pageaffairs/pen/JDrhG Подправил несколько вещей, но все еще в середине и сложены друг на друга. http://theinvicto.com/

Попытался изменить "clear: left" на "clear:none" и центрировать форму с выравниванием текста, но все же не в одной строке. Буду ли я использовать таблицу для этого?

HTML:

   #mc_embed_signup{background:#50B1C5; clear:none; }
    
    #mc-embedded-subscribe-form.validate {
        background: #50B1C5;
    }
    
    
    #mc_embed_signup #mce-EMAIL {
        border: 3px solid #F3A733;
    }
    
    input#mc-embedded-subscribe.button {
    background-color: #F3A733;
    font-family: ‘Abel’;
    }
    
    *, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
     #mc_embed_signup{ clear:none; font:18px Abel,Arial,sans-serif; vertical-align: middle; width: 100%; margin: 0 auto;}
     #mc_embed_signup form {display:block; position:relative; text-align:center;}
     #mc_embed_signup input {border:3px solid #F3A733; -webkit-appearance:none;}
     #mc_embed_signup input:focus {border-color:#333;}
     #mc_embed_signup .button {background-color: #F3A733; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
     #mc_embed_signup .button:hover {background-color:#EB7162;}
     #mc_embed_signup .small-meta {font-size: 11px;}
     #mc_embed_signup .nowrap {white-space:nowrap;}     
     #mc_embed_signup .clear {clear:none; display: inline-block; width: 31%; vertical-align: top;}
    
     #mc_embed_signup label {display:inline-block; font-size:16px; padding-bottom:10px; font-weight:bold; width: 70%;vertical-align: top;}
     #mc_embed_signup input.email {display:inline-block; padding:8px 0; margin:0 10px 10px 0; text-indent:5px; width:34%;vertical-align: top;}
     #mc_embed_signup input.button {display:block; width:100%; margin:0 0 10px 0;}
    
     @media screen and (max-width: 780px) {
      #mc_embed_signup {width: 100%;}
      #mc_embed_signup label, #mc_embed_signup input.email, #mc_embed_signup .clear {display: block; width: 100%;}
     }

 <!-- Begin MailChimp Signup Form -->
    <div id="mc_embed_signup">
    <form action="https://theinvicto.us17.list-manage.com/subscribe/post?u=197c4c27bd3b031b5957c0035&amp;id=0d6f057689" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
     <label for="mce-EMAIL"><span style="font-size: 35px;">be the first to know:</span></label>
     <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_197c4c27bd3b031b5957c0035_0d6f057689" tabindex="-1" value=""></div>
        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
        </div>
    </form>
</div>
    
    <!--End mc_embed_signup-->

 

Дайте мне знать, если кому-то повезло с чем-то другим. Я учусь и пытаюсь устранить неполадки, но наконец решил спросить, где я ошибся. Думая, может быть, это дисплей: настольная вещь, но я могу ошибаться, ха.

Answer 1

Нет необходимости использовать таблицу для этого. Чтобы поместить кнопку в одну строку, вы можете просто использовать это:

.clear {
    display: inline-block;
}

<div> с классом "очистить" отображается как block по умолчанию, и поскольку он содержит кнопку подписки, он будет отображаться в новой строке. Так что меняя его на inline-block позволит ему двигаться к той же линии.

Однако, глядя на источник для вашего сайта, вы также получили <br> а также <p> теги между элементами формы, поэтому они должны быть удалены, чтобы это работало. Кроме того, вы можете просто скрыть их, используя следующий стиль:

#mc_embed_signup_scroll p,
#mc_embed_signup_scroll br {
    display: none;
}

Надеюсь это поможет!

Answer 2

<div>
  <p class="line">Lorem Ipsum</p>
  <input type="text" class="line">
  <button class="line">Submit</button>
</div>

И CSS

.line {
  float: left;
}

Просто поместите в каждый элемент float: left, если это не работает, попробуйте поиграть с вашей шириной на обертке и каждом элементе, например ex: #wrapper="width: 100%", и так как есть 3 элемента, просто поместите каждый из них в имеют ширину 33%. Надеюсь это поможет