CODEWITHSUNDEEP
htmlcss
Or Smith
Or Smith

Reputation: 3616

HTML / inputs elements in the same line

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?

Upvotes: 0

Views: 97

Answers (3)

Lajd&#225;k Marek
Lajd&#225;k Marek

Reputation: 3089

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;">

Upvotes: 0

Blake
Blake

Reputation: 308

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;
}

Upvotes: 0

Jamie Barker
Jamie Barker

Reputation: 8256

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

form {
    display:inline-block;
}

Upvotes: 1

Related Questions