JavaScript对齐附加字段
我在JavaScript、HTML和CSS中得到了一个关于表单的代码,其中有一个“name”字段和“value”字段水平对齐,然后我得到了一个将添加字段的JS代码 当我添加一个字段时,问题就开始了,添加的字段是垂直的,我希望它像我的第一个表单一样是水平的。这是我的密码JavaScript对齐附加字段,javascript,css,Javascript,Css,我在JavaScript、HTML和CSS中得到了一个关于表单的代码,其中有一个“name”字段和“value”字段水平对齐,然后我得到了一个将添加字段的JS代码 当我添加一个字段时,问题就开始了,添加的字段是垂直的,我希望它像我的第一个表单一样是水平的。这是我的密码 <script> var counter = 1; var limit = 8; function addInput(divName){ if (counter == limit) {
<script>
var counter = 1;
var limit = 8;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newName = document.createElement('div');
newName.innerHTML = "Name " + "<input type='text' name='myName[]'>";
document.getElementById(divName).appendChild(newName);
var newValue = document.createElement('div');
newValue.innerHTML = "Value " + "<select name='myValue[]' ><option value='1 '>1</option></select>";
document.getElementById(divName).appendChild(newValue);
}
}
</script>
<div class="form-style-6" id="dynamicField">
<h1>Case Number</h1>
<form method="post" action="getpost.php">
Name<input type="text" name="myName[]" placeholder="Name" />
Value<select name="myValue[]">
<option value="Excellent ">Excellent</option>
<option value="Good ">Good</option>
<option value="Ok ">Ok</option>
<option value="Poor">Poor</option>
<option value="Bad">Bad</option>
</select>
</div>
<div class="form-style-6">
<input type="button" value="Add Fields" onClick="addInput('dynamicField');">
<input type="submit" value="Send" />
</div>
</form>
您可以添加
display:inline block
,它将使标签和输入字段垂直对齐
label, input {
display: inline-block;
vertical-align: baseline;
width: 125px;
}
没有效果。我认为这是在js下。当我使用style.display=“inline”时,它可以工作;代码
label, input {
display: inline-block;
vertical-align: baseline;
width: 125px;
}