如何将 HTML <FORM> 显示为内联元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1106720/
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
How to display HTML <FORM> as inline element?
提问by Evgeny
This is probably a basic html/css question...
这可能是一个基本的 html/css 问题...
I have a simple one-button form that I would like to display inline inside paragraph text.
我有一个简单的一键式表单，我想在段落文本内显示内联。
<p>Read this sentence
<form style='display:inline;'>
<input style='display:inline;'
type='submit'
value='or push this button'/>
</form>.
</p>
Even though form has style=display:inline attribute, I get a linebreak before the form. Is there a way to get rid of it?
即使表单具有 style=display:inline 属性，我也会在表单前换行。有没有办法摆脱它？
Can form elements appear inside <p>?
表单元素可以出现在里面<p>吗？
采纳答案by ChssPly76
Move your form tag just outside the paragraph and set margins / padding to zero:
将您的表单标签移动到段落外并将边距/填充设置为零：
<form style="margin: 0; padding: 0;">
<p>
Read this sentence
<input style="display: inline;" type="submit" value="or push this button" />
</p>
</form>
回答by John Kugelman
<form>cannot go inside <p>, no. The browser is going to abruptly close your <p>element when it hits the opening <form>tag as it tries to handle what it thinks is an unclosed paragraph element:
<form>不能进去<p>，不行。浏览器会<p>在遇到开始<form>标记时突然关闭您的元素，因为它会尝试处理它认为是未关闭的段落元素：
<p>Read this sentence
</p><form style='display:inline;'>
回答by Julibe De Salvador
You can try this code:
你可以试试这个代码：
<form action="#" method="get" id="login" style=" display:inline!important;">
<label for='User'>User:</label>
<input type='text' name='User' id='User'>
<label for='password'>Password:</label><input type='password' name='password' id='password'>
<input type="submit" name="log" id="log" class="botton" value="Login" />
</form>
The important thing to note is the css style property in the <form>tag.
需要注意的重要一点是<form>标签中的 css 样式属性。
display:inline!important;
display:inline!important;
回答by Grzegorz Oledzki
According to HTML specboth <form>and <p>are block elements and you cannot nest them. Maybe replacing the <p>with <span>would work for you?
根据HTML 规范，<form>和<p>都是块元素，您不能嵌套它们。也许替换<p>with<span>对你有用？
EDIT:
Sorry. I was to quick in my wording. The <p>element doesn't allow any block content within - as specified by HTML spec for paragraphs.
编辑：对不起。我的措辞太快了。该<p>元素不允许在HTML 规范中为段落指定任何块内容。
回答by Tac
You can accomplish what you want, I think, simply by including the submit button within the paragraph:
我认为，您只需在段落中包含提交按钮即可完成您想要的操作：
<pre>
<p>Read this sentence <input type='submit' value='or push this button'/></p>
</pre>
回答by zan
Just use the style float: leftin this way:
只需float: left以这种方式使用样式：
<p style="float: left"> Lorem Ipsum </p>
<form style="float: left">
<input type='submit'/>
</form>
<p style="float: left"> Lorem Ipsum </p>
