13
<form>Label<input type="text" size="10"></form>'More Stuff<br>

Produces:

enter image description here

How can I make "More Stuff" show on the same line as the input box, immediately after it:

enter image description here

4 Answers 4

13

A <form> element is a block element.

You can use CSS to make text float around it:

 <form style="display:inline;"><label>Label <input/></label></form>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, 
<form style="display:inline;"><label>Label <input/></label></form>
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.

2
  • Just noting here that, this works for <input type='file' ... also. Commented Jul 4, 2016 at 13:23
  • 1
    startingly, you can add display:inline to individual elements as well...
    – rogerdpack
    Commented Aug 8, 2017 at 2:39
2

Besides the fact the upper solutions did not work for me and if you also want to avoid using form, you could use display:flex.

this worked for me

<span style='display:flex;'>Label<input type="text" size="10">More Stuff</span>
1
  • This one worked for me as well. Thanks. Commented Feb 3 at 22:09
1

<form> is a block level element by default (things go below it). You could say something like '<form style='display:inline'> and that would help. Or you could float them left like:

<form style='float:left'>Label <input type="text" size="10"></form>
<div style='float:left'>More stuff</div>
2
  • ditto! Thanks! The display:inline did it for me!
    – tgoneil
    Commented Jan 5, 2012 at 20:01
  • I'd give this a "check" too as answered, but apparently I can only give it to one answer??
    – tgoneil
    Commented Jan 5, 2012 at 20:19
1

If style = "display:inline;" didn't work you need to check the next item (html tag), you might also need to add the same style to it.

Not the answer you're looking for? Browse other questions tagged or ask your own question.