Question

这可能是一个基本的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>？

中

Answer 1

将表单标记移到段落之外，并将边距/填充设置为零：

<form style="margin: 0; padding: 0;">
  <p>
    Read this sentence 
    <input style="display: inline;" type="submit" value="or push this button" />
  </p>
</form>

Answer 2

<form>无法进入<p>，没有。浏览器在点击开始<p>标记时会突然关闭<form>元素，因为它会尝试处理它认为是未关闭的段落元素：

<p>Read this sentence 
 </p><form style='display:inline;'>

Answer 3

您可以尝试以下代码：

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

需要注意的重要事项是<form>标记中的css样式属性。

display:inline!important;

Answer 4

根据HTML spec，<form>和<p>都是块元素，您无法嵌套它们。也许用<p>取代<span>会对你有用吗？

编辑：抱歉。我的措辞很快。 <p>元素不允许任何块内容 - 由HTML spec for paragraphs指定。

Answer 5

我认为，您可以通过在段落中包含提交按钮来完成您想要的任务：

     <pre>
     <p>Read this sentence  <input  type='submit' value='or push this button'/></p>
     </pre>

Answer 6

以这种方式使用样式float: left：

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

Answer 7

添加嵌入式包装。

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

如何将HTML <form>显示为内联元素？</form>

7 个答案: