How to Display HTML <Form> as Inline Element

How to display HTML FORM as inline element?

Move your form tag just outside the paragraph and set margins / padding to zero:

<form style="margin: 0; padding: 0;">
  <p>
    Read this sentence 
    <input style="display: inline;" type="submit" value="or push this button" />
  </p>
</form>

How to display HTML FORM as inline element next to images?

The issue here is that a form element is a block element by default. To change this, making the images appear on the same line, only the following CSS rule is needed:

form { display: inline }

Well, you also need to change href attributes in img elements to src attributes, but without this fix, the first three images do not display at all.

You don’t need anything else, since img elements are inline by default.

You don’t need even that single CSS rule if you move the img elements inside the form element.

Get two forms to display inline

I think what you want is to display them side by side. You can do it using floats instead like so:

<form style ='float: left; padding: 5px;'>
akjfhdkjahj<br />
 <input type = 'submit'/>
</form>
<form style ='float: left; padding: 5px;'>
  aklfjas<br />
  <input type = 'submit'/>
</form>

But even that's not ideal. What would be best is to wrap each < form > in < div >s and use float in the div tag instead.

How to display HTML form input elements (Bootstrap's class form-group ) inline?

You should simply use the form-inline class ... as per Bootstrap documentation. Basically wrap the div with another which has the 'form-inline' class and you should be good. No need for your display:inline; additional css.

How can I make inputs display inline?

Inputs are inline-block by default, so if there is space they will display inline, if not they will wrap to the next line. Either make sure the containing elements are wide enough to accommodate your inputs or try:

newdiv.setAttribute("style", "display: inline;white-space:nowrap;");

to stop the inputs from wrapping, note that this style is applied to the div not the inputs, you may actually want to remove display:inline;.

How to display inline input elements, surrounded by divs

Use below CSS, to achieve your expected result

.field{
 display:inline; 
}
#email_field{
  display:block;
}

http://jsfiddle.net/Nagasai_Aytha/k2Nqp/164/

display:inline will allow all fields to be displayed in inline and display:block on third field , will make it block element and gets displayed in separate line

Html - How to display different forms in a single line?

Form tag is a "Block level" element like Div tag for example.

you can add CSS to change it

<style> form{display:inline-block} </style>

Or by using flex

How to use CSS to align HTML inline form correctly?

You can vertically center inline-block elements using vertical-align: middle.

You can set the width to 50% of the screen using width: 50vw and differentiate a smaller screen using the @media screen and (max-width: 600px)

You do not need to play with flex in this case, this will make things incredibly more complex. Meanwhile, you can consider contenteditable elements that will nicely align and expand the text naturally.

[contenteditable] { color: blue; }
p { width: 50vw; margin: 0 auto; }
html, body { text-align: center; }
textarea { display: inline-block; vertical-align: middle; }
@media screen and (max-width: 600px) { p { width: 100vw; } }

<p>
    My name is <span contenteditable="true">enter name</span> and I come from a village
</p>

<p>
    My name is <textarea cols="10" rows="1" placeholder="enter name"></textarea> and I come from a village
</p>

---

Related Topics