appendTo()方法添加的DOM元素，与原生DOM元素出现不对齐的问题？怎么解决
appendTo()方法添加的DOM元素，与原本的DOM 元素之间不能对齐。按道理不会出现这种状态，因为他们使用的是同样的CSS样式。求解答，先谢谢了。代码如下：
<body>
<div class="contentpage">
<div class="content-father">
<ul class="table">
<div class="table-attr">
<div class="attr-name">属性</div>
<div class="detail-attr">
<select class="options" name="属性" id="">
<option value="颜色">颜色</option>
<option value="尺寸">尺寸</option>
</select>
</div>
</div>
<li class="table-attr detail-cot">
<div class="attr-name">属性值</div>
<div class="detail-attr">
<form class="inputs" action="">
<input type="text">
</form>
</div>
</li>
<li class="table-attr detail-cot">
<div class="attr-name">属性值</div>
<div class="detail-attr">
<form class="inputs" action="">
<input type="text">
</form>
</div>
</li>
<p></p>
</ul>
</div>
</div>
<div>
<button id="appendto">添加属性</button> <button id="remove">删除属性</button></button>
</div>
</body>
```css
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
border: 0;
}
ol,
ul,
li {
list-style: none;
}
.contentpage {
background-color: rgb(236, 236, 236);
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.content-father {
border: 1px solid #333;
box-sizing: border-box;
width: 100%;
padding: 10px;
}
.table {
width: 100%;
}
.table-attr {
width: 50%;
box-sizing: border-box;
}
.detail-cot {
display: inline-block;
box-sizing: border-box;
width: 45%;
}
.attr-name {
width: 100px;
display: inline-block;
}
.detail-attr {
display: inline-block;
width: 50%;
}
.options {
width: 50%;
}
.inputs {
width: 100%;
}
p {
margin-block-start: 0;
margin-block-end: 0;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#appendto").click(function () {
$("<li class='table-attr detail-cot'><div class='attr-name'>属性值</div><div class='detail-attr'><form class='inputs' action=''><input type='text'></input></form></div></li>").prependTo("p");
$("<li class='table-attr detail-cot'><div class='attr-name'>属性值</div><div class='detail-attr'><form class='inputs' action=''><input type='text'></input></form></div></li>").prependTo("p");
});
});
</script>
<script>
$(document).ready(function () {
$("#remove").click(function () {
$("li:nth-last-child(1)").remove();
$("li:nth-last-child(2)").remove();
});
});
</script>
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css" >
* {
margin: 0;
padding: 0;
}
img {
border: 0;
}
ol,
ul,
li {
list-style: none;
}
.contentpage {
background-color: rgb(236, 236, 236);
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.content-father {
border: 1px solid #333;
box-sizing: border-box;
width: 100%;
padding: 10px;
}
.table {
width: 100%;
}
.table-attr {
width: 50%;
box-sizing: border-box;
}
.detail-cot {
display: inline-block;
box-sizing: border-box;
width: 45%;
}
.attr-name {
width: 100px;
display: inline-block;
}
.detail-attr {
display: inline-block;
width: 50%;
}
.options {
width: 50%;
}
.inputs {
width: 100%;
}
p {
margin-block-start: 0;
margin-block-end: 0;
}
</style>
</head>
<body>
<div class="contentpage">
<div class="content-father">
<div class="table-attr">
<div class="attr-name">属性</div>
<div class="detail-attr">
<select class="options" name="属性" id="">
<option value="颜色">颜色</option>
<option value="尺寸">尺寸</option>
</select>
</div>
</div>
<ul class="table"><li class="table-attr detail-cot"><div class="attr-name">属性值</div><div class="detail-attr"><form class="inputs" action=""><input type="text"></form></div></li><li class="table-attr detail-cot"><div class="attr-name">属性值</div><div class="detail-attr"><form class="inputs" action=""><input type="text"></form></div></li></ul>
</div>
</div>
<div>
<button id="appendto">添加属性</button> <button id="remove">删除属性</button>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#appendto").click(function () {
$("<li class='table-attr detail-cot'><div class='attr-name'>属性值</div><div class='detail-attr'><form class='inputs' action=''><input type='text'></input></form></div></li>").appendTo(".table");
$("<li class='table-attr detail-cot'><div class='attr-name'>属性值</div><div class='detail-attr'><form class='inputs' action=''><input type='text'></input></form></div></li>").appendTo(".table");
});
});
</script>
<script>
$(document).ready(function () {
$("#remove").click(function () {
$("li:nth-last-child(1)").remove();
$("li:nth-last-child(2)").remove();
});
});
</script>
</body>
</html>
代码大概调整了下，首先没有对齐是因为有空格的原因造成的。
其次，追加到P标签里不太合适，UL里面不能包含P，也没必要为了追加单独加个P标签，所以替换成了appendTo，需要声明一点不是因为增加了一个P标签而导致的不能对其，是空格导致的。
还有就是UL里面也最好不好含有DIV，所以我把DIV移动到了UL外面。
你结构不一样，
你上面是li包裹，下面js是p包裹，
这里会有区别，
可以换成同一样试试，就行