My <div> tag collapses to a single line when I run my code, why?-CodePudding

My div tag collapses to a single when I run my code. why? Aren't div tags suppose to occupy the entire line? why are all the elemnts in the div tag appearing in the same line? whats the issue? I tried using other tags and multiple div tags still the same issue

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shapes</title>
<style>
    body{background-color: #3A3B44;  text-align: center;}
    div{ color:antiquewhite; text-align: center; display:block;  overflow: auto}
    </style>
</head>

<body>

<div  id="input1"  ></div>
<div  id="input2"  ></div>
<div  id="input3"  ></div>
<div  id="input4"  ></div>


 <script >
var input1= document.createElement("input");
input1.setAttribute("type", "text");
document.getElementById("input1").appendChild(input1);

var input2= document.createElement("input");
input2.setAttribute("type", "text");
document.getElementById("input1").appendChild(input2);

var input3= document.createElement("input");
input3.setAttribute("type", "text");
document.getElementById("input1").appendChild(input3);

var input4= document.createElement("input");
input4.setAttribute("type", "text");
document.getElementById("input1").appendChild(input4);


 </script>
</body>
</html>```

[This is my output][1]
 [1]: https://i.stack.imgur.com/1xLRT.png

CodePudding user response：

The problem is that you're adding all your <input> elements to the same <div> element.

Try something like that:

var input1 = document.createElement("input");
input1.setAttribute("type", "text");
document.getElementById("input1").appendChild(input1);

var input2 = document.createElement("input");
input2.setAttribute("type", "text");
document.getElementById("input2").appendChild(input2);

var input3 = document.createElement("input");
input3.setAttribute("type", "text");
document.getElementById("input3").appendChild(input3);

var input4 = document.createElement("input");
input4.setAttribute("type", "text");
document.getElementById("input4").appendChild(input4);

body {
  background-color: #3A3B44
}

div {
  color: antiquewhite;
  text-align: center;
  overflow: auto
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shapes</title>
</head>

<body>
  <div id="input1"></div>
  <div id="input2"></div>
  <div id="input3"></div>
  <div id="input4"></div>
</body>

</html>

CodePudding user response：

Your issue is that you are appending all inputs to the same div input1

const input1 = document.createElement("input");
input1.setAttribute("type", "text");
document.getElementById("input1").appendChild(input1);

const input2 = document.createElement("input");
input2.setAttribute("type", "text");
document.getElementById("input2").appendChild(input2);

const input3 = document.createElement("input");
input3.setAttribute("type", "text");
document.getElementById("input3").appendChild(input3);

const input4 = document.createElement("input");
input4.setAttribute("type", "text");
document.getElementById("input4").appendChild(input4);

div {
  /* demo */
  border: 1px solid red;
  margin-bottom: 10px;
  padding: 5px;
}

<div id="input1"></div>
<div id="input2"></div>
<div id="input3"></div>
<div id="input4"></div>

You can improve this code by using a for loop

for (i = 1; i < 5; i  ) {
  const input = document.createElement("input");
  input.setAttribute("type", "text");
  document.getElementById(`input${i}`).appendChild(input);
}

div {
  /* demo */
  border: 1px solid red;
  margin-bottom: 10px;
  padding: 5px;
}

<div id="input1"></div>
<div id="input2"></div>
<div id="input3"></div>
<div id="input4"></div>

CodePudding user response：

you need to just add div in container using bootstrap class and use the grid system like

<div >
  <div >
    <div >
     <--input Field -->
    </div>
    <div >
          <--input Field -->

    </div>
    <div >
         <--input Field -->

    </div>
  </div>
</div>