How can I make inputs display inline?

javascript jquery html css innerhtml

24,343

Solution 1

Inputs are inline-block by default, so if there is space they will display inline, if not they will wrap to the next line. Either make sure the containing elements are wide enough to accommodate your inputs or try:

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

to stop the inputs from wrapping, note that this style is applied to the div not the inputs, you may actually want to remove display:inline;.

Solution 2

I think this link may be handy

In that case, they resolved from the form tag, and creating a css class:

.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}

Solution 3

just using style='float:left;' for each 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>

24,343

Author by

JEA

Updated on July 09, 2022

Comments

JEA almost 2 years
I can't seem to figure out how to display the two inputs in the following code as {display: inline} format so that they appear next to each other rather than on separate lines. I've looked at other posts and have tried jQuery, <style> tags, .setAttribute etc. in order to try and add this CSS style.

I've also tried to create a class in the HTML with the requisite display: inline command in the CSS. I created this function to open up once a button on my homepage is clicked. Everything works fine, I just want the two inputs (text and button) to line up next to each other.

Any idea of where I am going wrong? I am a beginner.
```
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++; 
     }
}
```