HTML / inputs elements in the same line

Question

I'm trying to put some input elements (~7) in the same line.

I have the following code:

<form>
  <b> One </b>
 <input type="number" style = "width: 5%; vertical-align:top" class="form-control"  name="quantity" value="1" >
</form>
<form>
  <b> Two </b>
  <input type="number" style = "width: 5%; vertical-align:top" class="form-control"  name="quantity" value="1" >
</form>
<form>
  <b> Three</b>
  <input type="number" style = "width: 5%; vertical-align:top" class="form-control"  name="quantity" value="1" >
</form>

The problem is that every input every input has it own line, and it not in the same line.

Edit: Also, I wish that it will be with space in that way that the inputs elements would comprehend the whole line. Hoe can I do it?

the inputs elements would comprehend the whole line Not sure what you mean by this — SubjectCurio
– SubjectCurio, Commented Nov 25, 2014 at 15:46
@MLeFevre: Sorry. I mean that between each input element would be equal spaces, so the input elements would be on the entire row — Or Smith
– Or Smith, Commented Nov 25, 2014 at 15:48

Jamie Barker · Accepted Answer · 2014-11-25 15:50:38Z

1

Change the display, remove the inline styles. Example: http://jsfiddle.net/ys1Lgj7e/

form {
    display:inline-block;
}

answered Nov 25, 2014 at 15:50

Jamie Barker

8,2663 gold badges31 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Blake · Accepted Answer · 2014-11-25 15:54:12Z

0

Your input elements should all share the same form, and your styling can be modified & put into CSS, which will simplify your code significantly.

Here's a working example:

http://jsfiddle.net/u4utpu6c/

HTML

<form>
<input type="number" />
<input type="number" />
<input type="number" />
</form>

CSS

input {
display: inline;
width: 5%; 
vertical-align:top;
}

answered Nov 25, 2014 at 15:54

Blake

3183 silver badges11 bronze badges

2 Comments

Or Smith Over a year ago

Thanks. How can I do equal spaces between each input? so the last input element would be in the end of the line?

Blake Over a year ago

Fiddle has been updated. You'll want to put the inputs in divs, so that the width of the page division is different than the width of the input field. Also, I changed the width of the input field to be in "em" units, which is much better for inputs than percentages.

ShufflerShark · Accepted Answer · 2014-11-25 16:57:24Z

0

Set every form tag to 'display: inline;'

In that html file:

<style>
form {
    display: inline;
}
</style>

OR in your css file:

form {
    display: inline;
}

OR each tag :

<form style="display: inline;">

edited Nov 25, 2014 at 16:57

ShufflerShark

3871 gold badge4 silver badges20 bronze badges

answered Nov 25, 2014 at 15:51

Lajdák Marek

3,1098 gold badges35 silver badges60 bronze badges

Collectives™ on Stack Overflow

HTML / inputs elements in the same line

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related