如何显示 HTML < FORM > 作为内联元素？

这可能是一个基本的 html/css 问题..。

我有一个简单的一键表单，我想显示在内联的段落文本。

<p>Read this sentence
<form style='display:inline;'>
<input style='display:inline;'
type='submit'
value='or push this button'/>
</form>.
</p>

尽管 form 具有 style = display: inline 属性，但是在表单之前会有一个换行符。有办法摆脱它吗？

表单元素能否出现在 <p>中？

192056 次浏览
小开

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

<p>Read this sentence
</p><form style='display:inline;'>
小开
最佳答案

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>
小开

According to HTML spec both <form> and <p> are block elements and you cannot nest them. Maybe replacing the <p> with <span> would work for you?

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.

小开

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.

display:inline!important;

小开

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>
小开

Just use the style float: left in this way:

<p style="float: left"> Lorem Ipsum </p>
<form style="float: left">
<input  type='submit'/>
</form>
<p style="float: left"> Lorem Ipsum </p>
小开

Add a inline wrapper.

<div style='display:flex'>
<form>
<p>Read this sentence</p>
<input type='submit' value='or push this button' />
</form>
<div>
<p>Message here</p>
</div>

提交答案