HTML <FORM>をインライン要素として表示するにはどうすればよいですか?


83

これはおそらく基本的なhtml / cssの質問です...

段落テキスト内にインラインで表示したいシンプルなワンボタンフォームがあります。

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


3
回答とコメントをありがとう!
Evgeny

回答:


73

フォームタグを段落のすぐ外側に移動し、マージン/パディングをゼロに設定します。

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

あなたの答えは私の日を救った。
DrinkJavaCodeJava 2013

3
フォームのマージンとパディングが機能しませんでした。代わりにdisplay:inlineを使用する必要があり、マージン/パディングは必要ありませんでした。
angularsen

2
display:inlineも私のためにそれをしました。それをあなたの答えのフォームスタイルに加えてみませんか。
Praesagus 2014

私も救われました!神よ、2時間も無駄になり、私がしなければならなかったのは、段落を入力の外に移動することだけでした。なぜこれが機能するのかを知りたいのですが、神に感謝します。
gunslingor 2016年

54

<form>中に入ることはできません<p>、いいえ。ブラウザは<p>、開始<form>タグに当たると、閉じられていない段落要素であると見なすものを処理しようとするため、要素を突然閉じます。

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

22

このコードを試すことができます:

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


6

HTML仕様によると、<form><p>は両方ともブロック要素であり、ネストすることはできません。たぶん交換<p><span>あなたのために働くのでしょうか?

編集:ごめんなさい。私は言葉遣いを急ぐことになっていました。この<p>要素は、段落のHTML仕様で指定されているように、内のブロックコンテンツを許可しません。


3
一部のブロック要素(div要素など)はネストできますが、一部は特殊であり、ネストしないでください。たとえば、段落タグにはインライン要素のみを含めることができます。
ザックザヒューマン

0

段落内に送信ボタンを含めるだけで、必要なことを達成できると思います。

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

0

次のようにスタイルfloat: leftを使用するだけです。

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

3
floatトリックを行うよりも、他の回答で提案されているようにマークアップを修正することをお勧めします。
ジェレミーJスターチャー2012

0

インラインラッパーを追加します。

<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>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.