2009-07-09 11 views
78

これはおそらく基本的な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>

+3

お返事ありがとうございました! – Evgeny

答えて

69
だけ段落の外にフォームタグを移動

は、および設定/ゼロパディング:

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

あなたの回答が保存されました。 – DrinkJavaCodeJava

+2

私のフォームの余白と詰め物は私のためには機能しませんでしたが、代わりにdisplay:inlineを使用しなければならず、マージン/パディングは必要ありませんでした。 – angularsen

+2

ディスプレイ:インラインでも私のためにしました。なぜあなたの答えのフォームスタイルにそれを追加しないでください。 – Praesagus

50

<form>はありません、<p>内で行くことができません。それが閉じられていない段落要素であると考えるものを扱うようにしようとして、ブラウザが開き<form>タグに当たったとき、突然、あなたの<p>要素を閉じるために起こっている:余白を

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

HTML spec両方<form><p>によると、ブロック要素であり、あなたがそれらをネストすることはできません。 <p><span>に置き換えても問題ありませんか?

編集: 申し訳ありません。私は言葉遣いが素早かった。 <p>要素では、HTML spec for paragraphsで指定された範囲内のブロックコンテンツは許可されません。

+2

いくつかのブロック要素は(div要素のように)ネストすることができますが、いくつかは特別なものであり、ネストすることはできません。たとえば、段落タグには、インライン要素のみを含めることができます。 –

18

あなたはこのコードを試すことができます。

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

+2

これが唯一の答えです。 – Aris

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'トリックよりも、他の答えに示唆されているようにマークアップを修正する方が良いです。 –

関連する問題