CODEWITHSUNDEEP
htmlcssforms
Sandro Meyer
Sandro Meyer

Reputation: 1

how to align subscribe button next to email field?

I have a small email field plus subscribe button embedded, but I would like to show the subscribe button right next to the email input field with a bit of a margin to the left of the subscribe button.

I am using this code:

<label><strong>Get the latest jobs in your inbox!</strong></label>
<input style="width:auto !important" type="email" name="EMAIL" placeholder="[email protected]" required />
<input display="inline-block" position="relative" margin-left="5px" vertical-align="top" type="submit" value="Subscribe" />

What am I doing wrong?

Upvotes: 0

Views: 897

Answers (2)

Damiano
Damiano

Reputation: 459

I believe you missed display: inline-block on the email field. Just add it, and it should work!

Also (albeit not related to your problem), you did not apply styles to the "Subscribe" button in the correct way: what you have is

<input display="inline-block" position="relative" margin-left="5px" vertical-align="top" type="submit" value="Subscribe"/>

while it should be:

<input style="display: inline-block; position: relative; margin-left: 5px; vertical-align: top;" type="submit" value="Subscribe"/>

In general, however, I recommend using external CSS and referencing your element with classes.

Let me know if it worked!

Upvotes: 0

Besart Marku
Besart Marku

Reputation: 543

Try display: inline-block; instead of display:block from your css

Upvotes: 0

Related Questions