Wie zeige ich HTML <FORM> als Inline-Element an?

83

Dies ist wahrscheinlich eine grundlegende HTML / CSS-Frage ...

Ich habe ein einfaches Ein-Schaltflächen-Formular, das ich im Absatztext inline anzeigen möchte.

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

Obwohl das Formular das Attribut style = display: inline hat, wird vor dem Formular ein Zeilenumbruch angezeigt. Gibt es eine Möglichkeit, es loszuwerden?

Können Formularelemente im Inneren erscheinen <p>?

html css

— Evgeny
quelle

3

Vielen Dank für die Antworten und Kommentare!

— Evgeny

73

Bewegen Sie Ihr Formular-Tag direkt außerhalb des Absatzes und setzen Sie die Ränder / Auffüllungen auf Null:

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

— ChssPly76
quelle

Ihre Antwort hat mir den Tag gerettet.

— DrinkJavaCodeJava

3

Rand und Polsterung in meinem Formular funktionierten bei mir nicht, ich musste stattdessen display: inline verwenden und dann war Rand / Polsterung nicht erforderlich.

— Angularsen

2

display: inline hat es auch für mich gemacht. Warum fügen Sie das nicht dem Formularstil in Ihrer Antwort hinzu?

— Praesagus

hat mich auch gerettet! Gott, 2 Stunden verschwendet und alles was ich tun musste, war die Absätze außerhalb der Eingabe zu verschieben. Ich wünschte, ich wüsste, warum das funktioniert, aber Gott sei Dank.

— Revolverheld oder

54

<form>kann nicht hineingehen <p>, nein. Der Browser wird Ihr <p>Element abrupt schließen , wenn er auf das Eröffnungs- <form>Tag trifft, während er versucht, das zu verarbeiten, was er für ein nicht geschlossenes Absatzelement hält:

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

— John Kugelman
quelle

22

Sie können diesen Code ausprobieren:

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

Das Wichtigste ist die CSS-Stileigenschaft im <form>Tag.

display:inline!important;

— Julibe De Salvador
quelle

6

Laut HTML-Spezifikation sind beide <form>und <p>Blockelemente und können nicht verschachtelt werden. Vielleicht ist der Austausch <p>mit <span>für Sie arbeiten würde?

EDIT: Entschuldigung. Ich war zu schnell in meiner Formulierung. Das <p>Element erlaubt keinen Blockinhalt innerhalb - wie in der HTML-Spezifikation für Absätze angegeben .

— Grzegorz Oledzki
quelle

3

Einige Blockelemente können verschachtelt sein (wie div-Elemente), andere sind speziell und sollten nicht verschachtelt werden. Das Absatz-Tag kann beispielsweise nur Inline-Elemente enthalten.

— Zack The Human

0

Ich denke, Sie können das erreichen, was Sie wollen, indem Sie einfach die Schaltfläche "Senden" in den Absatz einfügen:

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

— Tac
quelle

0

Verwenden Sie den Stil einfach float: leftso:

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

— zan
quelle

3

Es ist besser, das Markup zu korrigieren, wie in anderen Antworten vorgeschlagen, als floatTricks auszuführen.

— Jeremy J Starcher

0

Fügen Sie einen Inline-Wrapper hinzu.

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

— Inder Singh
quelle