Html 标签和输入框在同一行

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1349074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 00:44:43  来源:igfitidea点击:

label and input box on the same line

htmlcss

提问by mrblah

I have a the following html:

我有以下 html:

<label>blah</label>
<input type=text ... />

I want the label to be on one row, and below it the input box.

我希望标签在一行上,在它的下方是输入框。

currently it is on the same line, do I have to use a clear?

目前它在同一条线上,我必须使用 clear 吗?

回答by Mike Hall

You can put a css class or style that would change display to block:

您可以放置​​一个 css 类或样式,将显示更改为阻止:

<label style="display:block">blah</label>
<input type=text ... />

回答by Brandon

<label>blah</label>
<br />
<input type=text ... />

Use a line break.

使用换行符。

回答by Alex Pavlov

<label for="fldAge">Age:</label>
<p>
<input type="text" name="Age" id="fldAge" />
</p>

This also causes the browser to render text associated with an input with a focus rectangle, and enables the user to focus the field by clicking anywhere in the associated text instead of just the input field control.

这也会导致浏览器使用焦点矩形呈现与输入相关联的文本,并使用户能够通过单击相关文本中的任意位置而不是仅单击输入字段控件来聚焦该字段。

回答by Josh

Do it with CSS:

用 CSS 来做:

label { clear: both; }

标签{清除:两者;}

回答by atfergs

You could throw in a breakline (<br />) between them or put each in its own div.

您可以<br />在它们之间添加一个隔断线 ( ) 或将每个放在自己的 div 中。

回答by Jon

The simplest way is to add a <br>after </label>.

最简单的方法是添加一个<br>after </label>

Alternatively you could use div tags or a table with two rows.

或者,您可以使用 div 标签或具有两行的表格。