如何在html输入字段的末尾防止换行?

时间:2012-01-05 19:53:44

标签: html

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

产地:

enter image description here

如何在输入框的同一行显示“More Stuff”,紧随其后:

enter image description here

4 个答案:

答案 0 :(得分:10)

A&lt; form&gt; element是block element

您可以使用CSS使文本在其周围浮动:

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

答案 1 :(得分:1)

默认情况下,

<form>是一个块级元素(事情在它之下)。你可以说'<form style='display:inline'>这样的话会有所帮助。或者你可以把它们漂浮起来:

<form style='float:left'>Label <input type="text" size="10"></form>
<div style='float:left'>More stuff</div>

答案 2 :(得分:1)

如果style = "display:inline;"不起作用,则需要检查下一项(html标记),还可能需要向其添加相同的样式。

答案 3 :(得分:0)

除了上面的解决方案对我不起作用的事实之外,如果您还想避免使用表单,则可以使用display:flex。

这对我有用

<span style='display:flex;'>Label<input type="text" size="10">More Stuff</span>