CODEWITHSUNDEEP
htmlcss
Sam Jefferies
Sam Jefferies

Reputation: 594

Email Input and Submit button on same line?

How can I get my email input and submit button sitting next to each other on the same line?

I've tried adding: display: inline-block but it doesn't seem to work?

URL: https://www.moneynest.co.uk/641-2/

Code 

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />

Upvotes: 1

Views: 1063

Answers (5)

Facundo La Rocca
Facundo La Rocca

Reputation: 3876

Using FlexBox is the best approache for this kind of requirements, not only because it's going to solve your problem, and also you are going to be able to forget if your device is landscape or portrait oriented.

Try this:

.row-container{
  display: flex;
  row-direction: row;
}
<div class="row-container">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</form>
</div>
<hr />
</div>

Upvotes: 2

Tanasos
Tanasos

Reputation: 4098

You have a hanging <br> tag that adds a blank row to your content.

e.g. > The browser tells that everything after this input field should be on a new row.

And this "fix" for spam-bots saying that your input should be inside a <p> tag, I dont think that is valid.

<div id="mc_embed_signup_scroll" style="margin-left: 30px;">
    <p> <input value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required="" type="email">
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    </p>
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input name="b_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value="" type="text"></div>
    <div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
    <hr>
 </div>

There is also a div with the id of #mc_embed_signup that has a width: 300px hardcoded. That will not allow You to get those elements on the same row without them overflowing their container.

Upvotes: 1

JavaQueen
JavaQueen

Reputation: 1205

Or, you can use <table>

<table> <th>   
 <td><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required></td>

    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<td>
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value="">
</div>
    <div class="clear signup">
<button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
    </div>
</td></th></table>
</form>
</div>
<hr />

Upvotes: 0

elementzero23
elementzero23

Reputation: 1429

With float: left on your input field

#mce-EMAIL {
  float: left;
  }
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" 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_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
<div class="clear signup"><button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course!</button>
</div>
    </div>

Upvotes: 0

Hiren Jungi
Hiren Jungi

Reputation: 854

you have input tag outside of the div here is the fix Use this code below.

<div>
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your best email...*" required>
    <input type="text" name="b_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value="">
    <button id="mc-embedded-subscribe" class="text-uppercase btn btn-primary btn-lg btn-bottom">Send me the course</button>
    </div>

Upvotes: 0

Related Questions