調整動態輸入

我想對齊動態創建的div，但我認爲我缺少一些基本的東西。調整動態輸入

我只是想在每個輸入之間留出一點空間，但我不明白如何定位將在css中新創建的元素。

任何幫助，將不勝感激。本質上，我只是試圖將它們排列在彼此之下，但是我希望能夠操縱它以最終與其他css混合。

鏈接：http://codepen.io/theodore_steiner/pen/mArAGv

HTML: 

<div id="fullName"> 
<p>Full Name</p> 

<input type="text" name="firstName_1" /> 

<input type="text" name="middleName_1" /> 

    <input type="text" name="lastName_1" /> 

</div> 

<input type="button" id="myButton" onclick="addName()" value="+" /> 

CSS: 

* 
{ 
    margin: 0; 
    padding: 0; 
} 

p 
{ 
    float: left; 
    margin-right: 30px; 
} 

input 
{ 
    margin-right: 10px; 
    margin-bottom: 10px; 
} 

#fullName 
{ 
    margin-left: 30px; 
} 

JS: 
var i = 0; 

function addName() 
{ 
    if(i <= 3) 
    { 
     var div = document.createElement("div"); 
     div.innerHTML = '<input type="text" name="firstName_'+i+'"><input type="text" name="middleName_'+i+'"><input type="text" name="lastName_'+i+'">'; 

     document.getElementById("fullName").appendChild(div); 
    } 
};

來源

2016-09-29 Theodore Steiner

CSS不關心，如果一個元素從一開始就在那裏，或以後加入動態。所有你需要的是通過（f.e.普通類）選擇這些元素的標準，然後編寫匹配的選擇器。 – CBroe

將div.innerHTML元素包裝在自己的類中是最好的方法嗎？ –

http://codepen.io/vikash2402/pen/vXJXqP它會爲你工作嗎？ –

好吧，我只是想用CSS來處理。

var i = 0; 
 

 
function addName() 
 
{ 
 
\t if(i <= 3) 
 
\t { 
 
\t \t var div = document.createElement("div"); 
 
\t \t div.innerHTML = '<input type="text" name="firstName_'+i+'"> <input type="text" name="middleName_'+i+'"> <input type="text" name="lastName_'+i+'">'; 
 
\t \t 
 
\t \t document.getElementById("fullName").appendChild(div); 
 
\t } 
 
};

* 
 
{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
.containerDiv{ 
 
\t margin: 100px; 
 
\t 
 
} 
 

 
#fullName 
 
{ 
 
\t display:table; 
 
} 
 

 
p 
 
{ 
 
\t float: left; 
 
\t margin-right: 30px; 
 
} 
 

 
input 
 
{ 
 
\t margin-right: 10px; 
 
\t margin-bottom: 10px; 
 
} 
 

 
#fullName 
 
{ 
 
\t margin-left: 30px; 
 
} 
 

 
/* .left 
 
{ 
 
\t margin-left: 99px; 
 
} */

<p>Full Name</p> 
 
<div id="fullName" class:"containerDiv"> 
 

 
<input type="text" name="firstName_1" /> 
 
\t 
 
<input type="text" name="middleName_1" /> \t 
 
\t 
 
\t <input type="text" name="lastName_1" /> 
 
\t 
 
</div> 
 

 
<input type="button" id="myButton" onclick="addName()" value="+" />

http://codepen.io/vikash2402/pen/JRybWZ

希望這將幫助你:)

來源

2016-09-29 13:54:19

它正在創建一個新班級，但班級沒有對齊......我錯過了什麼？ http://codepen.io/theodore_steiner/pen/rrzWZz –

http://codepen.io/vikash2402/pen/JRybWZ現在嘗試..改變了一點..現在的工作？ –

完美的作品！我發現你爲了{}而刪除了div的類名，但JS知道如何定位類元素？ –

調整動態輸入

回答

相關問題