CODEWITHSUNDEEP
htmlcss
luqo33
luqo33

Reputation: 8361

Rendering form input fields inline across all browsers

I wanted to position form text input field and a submit button inline like so (as seen on Chrome):

enter image description here

I achieved the intended positioning by applying these rules (simplified markup and css):

HTML:

<form>
    <div class="wrapper">
        <input class="email-input" type="email">
    </div>
    <input class="submit-btn" type="submit" value="Join now">
</form>

CSS:

.wrapper {
  display: inline-block;
}

However, on Firefix (31.0) I get this:

enter image description here

The CSS rules and markup I used are very straightforward, but they're failing.

How could I make the form render correctly across all browsers?

Upvotes: 2

Views: 106

Answers (1)

Maihan Nijat
Maihan Nijat

Reputation: 9344

If you do not need div then remove it and add id or class to input for CSS selectors, and then inline-block the input.

For your HTML code align the inputs vertically, if needed, also align the wrapper vertically. 

input {
  vertical-align: top;
}

Optional: I would also suggest to reset CSS at first point.

Upvotes: 1

Related Questions