如何將HTML <FORM>顯示爲內聯元素？

這可能是一個基本的html/css問題...如何將HTML <FORM>顯示爲內聯元素？

我有一個簡單的一鍵式表單，我想要在段落文本中內聯顯示。

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

即使表單具有style = display：inline屬性，我在表單之前得到一個換行符。有沒有辦法擺脫它？

可以在<p>裏面出現表格元素嗎？

來源

2009-07-09 Evgeny

感謝所有的答案和評論！ – Evgeny 2009-07-09 22:43:48

移動你的表單標籤只是段落外，並設置頁邊距/填充零：

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

來源

2009-07-09 22:21:06 ChssPly76

你的答案拯救了我的一天。 – DrinkJavaCodeJava 2013-12-14 17:36:46

我的表單中的邊距和填充不適用於我，我必須使用display：inline，然後使用margin/padding不是必需的。 – angularsen 2014-01-03 11:29:56

顯示：內聯對我也是如此。爲什麼不把它添加到你的答案中的表單樣式。 – Praesagus 2014-12-28 03:13:30

<form>不能進去<p>，沒有。該瀏覽器是怎麼回事，當它擊中開幕<form>標籤突然關閉<p>元素，因爲它試圖處理它認爲是未封閉的段落元素：

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

來源

2009-07-09 22:19:18

根據HTML spec都<form>和<p>是塊元素，你不能嵌套的。也許用<span>代替<p>會適合你嗎？編輯：對不起。我的措辭很快。 <p>元素不允許任何塊內容 - 如HTML spec for paragraphs所指定的那樣。

來源

2009-07-09 22:25:08

你可以試試這個代碼：

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

來源

2011-02-18 22:16:28

可以完成你想要什麼，我認爲，僅僅通過包括段落內提交按鈕：

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

來源

2011-08-15 02:19:21 Tac

只需使用樣式float: left這樣：

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

來源

2012-09-21 14:07:35 zan

如何將HTML <FORM>顯示爲內聯元素？

回答

相關問題