Getting e-mail input box and submit-button to the same line

HTML-CSS
1

Hi,

How could I get the e-mail input box (with the grey background) and the submit-button to the same (in)line, for example using flex or flexbox?

(I put the link to my project page, because the code changes all the time and the picture would look so huge on this site, if I would copy everything here).

Edit: And one “stupid” question. One of the requirements of the product landing page project is that "My landing page has “a form” element with a corresponding id=“form” " If I have have a div class called form and it has an id=“form”, is that div class really a form element?

I have noticed, that if someone uses flex/flexbox, the parent class should be a div element with some class name and also the child elements should be divs with some class names. For example on this video: https://scrimba.com/p/pL65cJ/cGNKJTv

So if I do something like this, does it fullfill that requirement? I am a bit confused of what everything that form element actually can be. Is it just <form > </form> and something inside of that?

2

If I have have a div class called form and it has an id=“form”, is that div class really a form element?

No, it is a <div> element (Also I am assuming you mean a div element, not a div class — I’m not being nitpicky here, the words you’re using quite have specific meanings in this context)

I have noticed, that if someone uses flex/flexbox, the parent class should be a div element with some class name and also the child elements should be divs with some class names

No, <div> elements are just being used as examples, in practice you use the correct elements in your HTML.

A form element represents a form on a web page, so it contains what you’d expect to see in a form: inputs, labels for those inputs, a button to submit it etc

Getting e-mail input box and submit-button to the same line

display: flex on the parent. flex: 1 on the input element. For an example:

1 Like
3