Wie kann ich die Eingänge display inline?

Ich kann nicht scheinen, um herauszufinden, wie die zwei Eingänge in der folgenden code als {display: inline} - format, so dass Sie nebeneinander angezeigt werden statt in separaten Zeilen angezeigt. Ich habe die anderen Beiträge und habe versucht jQuery, <style> tags .setAttribute etc. um zu versuchen, und fügen Sie diesen CSS-Stil.

Ich habe auch versucht, eine Klasse zu erstellen in HTML mit der erforderlichen display: inline Befehl in der CSS. Ich habe diese Funktion zu öffnen, sobald Sie eine Taste auf meiner homepage geklickt wird. Alles funktioniert einwandfrei, ich möchte nur die beiden Eingänge (text und button), um eine Linie neben einander.

Irgendeine Idee, wo ich falsch? Ich bin ein Anfänger.

var counter = 1;
var limit = 2;
var newdiv = document.createElement('div');

function addInput(divName){
     if (counter == limit)  {
          (counter);
     }
     else {
          nFilter.className = 'input';
          newdiv.setAttribute("style", "display: inline;");
          newdiv.innerHTML = "<br><input type='text' placeholder='Postal Code' name='myInputs[]'> " + " <input type='button' value='Lets Go!' onclick='url(file:///C:/Users/Joy/Documents/ZapList/HoldingPage.php)'>";
          document.getElementById(divName).appendChild(newdiv).span;
          counter++; 
     }
}

InformationsquelleAutor JEA | 2014-10-09

  1. 4

    Eingänge sind inline-block standardmäßig, also, wenn es gibt Raum, Sie wird display inline, wenn nicht, dann werden Sie auf die nächste Zeile umbrochen. Entweder stellen Sie sicher, dass die Elemente enthalten, sind breit genug, um Platz für Ihre Eingaben oder versuchen Sie es:

    newdiv.setAttribute("style", "display: inline;white-space:nowrap;");

    stoppen die Eingänge aus der Verpackung, beachten Sie, dass dieser Stil angewendet wird, um die div nicht der Eingänge, können Sie tatsächlich entfernen möchten display:inline;.

    Danke. Ja, entfernt habe ich das display:inline-und es funktionierte. Hier ist die gefüttert ich Hinzugefügt, um zu bekommen, was ich brauchte: newdiv.setAttribute("style","width: 900px;white-space: nowrap;");

    InformationsquelleAutor Jon P

  2. 1

    nur mit style='float:left;' für jedes input-element

    <html>
  <head>
    <title>this is a test</title>
    <meta content="">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
      <div id="a"></div>
      <script type="text/javascript">
    var counter = 1;
    var limit = 2;
    var newdiv = document.createElement('div');

    function addInput(divName){
    if (counter != limit)  {
        newdiv.innerHTML = "<br><input type='text' placeholder='Postal Code' name='myInputs[]' style='float:left;'> " + " <input type='button' style='float:left;' value='Lets Go!' onclick='url(file:///C:/Users/Joy/Documents/ZapList/HoldingPage.php)'>";
        document.getElementById(divName).appendChild(newdiv);

        counter++; 
    }
    }
    addInput("a");
      </script>



    </body>
  </html>

    InformationsquelleAutor Saeid

  3. 0

    Wenn ich dir Recht, dann wollen Sie die Anzeige von zwei Textfeldern, wenn ein button geklickt wird...

    Machen Sie es ziemlich einfach und nehmen Sie das Dokument.write-Befehl.

    z.B.

    <body>
<input type="button" value="Click me" onClick="makeSmth()"></input>
</body>

<script>
function makeSmth() {

    document.write("<br><input type='text' id='textBox01'></input>");
}
</script>

    InformationsquelleAutor herzDev

Schreibe einen Kommentar