Question

我正在尝试对齐动态创建的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);
    }
};

Answer 1

好吧，我刚刚尝试使用CSS。

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);
	}
};

*
{
	margin: 0;
	padding: 0;
}

.containerDiv{
	margin: 100px;
	
}

#fullName
{
	display:table;
}

p
{
	float: left;
	margin-right: 30px;
}

input
{
	margin-right: 10px;
	margin-bottom: 10px;
}

#fullName
{
	margin-left: 30px;
}

/* .left
{
	margin-left: 99px;
} */

<p>Full Name</p>
<div id="fullName" class:"containerDiv">

<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="+" />

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

希望这会对您有所帮助：）

对齐动态输入

1 个答案: