Menu
<form>Label<input type="text" size="10"></form>'More Stuff<br>
Produces:
How can I make "More Stuff" show on the same line as the input box, immediately after it:
714
There are several ways to prevent line breaks in content. Using is one way, and works fine between words, but using it between an empty element and some text does not have a well-defined effect. The same would apply to the more logical and more accessible approach where you use an image for an icon.
<nobr>: The Non-Breaking Text element Be aware that this feature may cease to work at any time. The <nobr> HTML element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text.
The white-space property has numerous options, all of which define how to treat white space inside a given element. Here, you have set white-space to nowrap , which will prevent all line breaks.
The easiest way to have a line break is using the <br> tag on your text. It is used for inserting a single line break.
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.<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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
