Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to prevent newline at the end of html input field?

Tags:

html

<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

like image 714
tgoneil Avatar asked Jan 05 '12 19:01

tgoneil


People also ask

How do I stop a line break in HTML?

There are several ways to prevent line breaks in content. Using &nbsp; 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.

How do you make text not break in HTML?

<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.

How do you stop a line break in CSS?

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.

How do you break a line in input tag?

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.


3 Answers

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.
like image 93
kay Avatar answered Oct 13 '22 04:10

kay


<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>
like image 1
Rodolfo Avatar answered Oct 13 '22 06:10

Rodolfo


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>
like image 1
eddy white Avatar answered Oct 13 '22 04:10

eddy white